/* =========================================================
   Ai PANTHIYA — REUSABLE COMPONENTS
   Theme: Charcoal, Ash, Yellow
   Red and Maroon only for essential emphasis
   ========================================================= */


/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(31, 31, 31, 0.96);
    color: var(--color-white);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-inner {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.site-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.site-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.site-logo__title {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 900;
}

.site-logo__subtitle {
    margin-top: 3px;
    color: var(--color-yellow);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: clamp(0.65rem, 1vw, 1.05rem);
    margin-left: auto;
}
.dictionary-tree-node__row[data-dictionary-row]{cursor:pointer}

.main-nav a {
    position: relative;
    color: #e8e8e8;
    font-size: 0.82rem;
    font-weight: 700;
    transition:
        color var(--transition),
        transform var(--transition);
}

.main-nav a::after {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-yellow);
    content: "";
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity var(--transition),
        transform var(--transition);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    color: var(--color-yellow);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.mobile-menu-button {
    display: none;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-white);
    font-size: 1.45rem;
    line-height: 1;
}

.mobile-menu-button:hover {
    border-color: rgba(242, 181, 31, 0.4);
    color: var(--color-yellow);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.82rem 1.3rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 800;
    line-height: 1;
    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.button--primary {
    background: var(--color-yellow);
    color: var(--color-black);
    box-shadow: 0 10px 30px rgba(242, 181, 31, 0.18);
}

.button--primary:hover {
    background: #ffc62a;
    box-shadow: 0 14px 36px rgba(242, 181, 31, 0.25);
}

.button--dark {
    background: var(--color-charcoal);
    color: var(--color-white);
}

.button--dark:hover {
    background: #2b2b2b;
}

.button--outline {
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    color: var(--color-white);
}

.button--outline:hover {
    border-color: var(--color-yellow);
    background: rgba(242, 181, 31, 0.08);
    color: var(--color-yellow);
}

.button--light-outline {
    border-color: var(--color-charcoal);
    background: transparent;
    color: var(--color-charcoal);
}

.button--light-outline:hover {
    border-color: var(--color-yellow);
    background: rgba(242, 181, 31, 0.1);
}

.button--red {
    background: var(--color-red);
    color: var(--color-white);
}

.button--red:hover {
    background: var(--color-maroon);
}


/* =========================================================
   HERO SECTION
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: 100px;
    background:
        radial-gradient(circle at 82% 20%,
            rgba(242, 181, 31, 0.2),
            transparent 30%),
        linear-gradient(135deg,
            #111111 0%,
            #202020 55%,
            #151515 100%);
    color: var(--color-white);
}

.hero::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px);
    background-size: 42px 42px;
    content: "";
    opacity: 0.45;
    pointer-events: none;
}

.hero::after {
    position: absolute;
    right: -140px;
    bottom: -210px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(242, 181, 31, 0.18);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 4rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-lg);
    padding: 0.56rem 0.95rem;
    border: 1px solid rgba(242, 181, 31, 0.35);
    border-radius: var(--radius-pill);
    background: rgba(242, 181, 31, 0.08);
    color: var(--color-yellow);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.hero-badge::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-yellow);
    content: "";
    box-shadow: 0 0 16px rgba(242, 181, 31, 0.8);
}

.hero-title {
    max-width: 850px;
    margin-bottom: var(--space-lg);
    color: var(--color-white);
    font-size: clamp(3rem, 6.5vw, 5.7rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.hero-title span {
    color: var(--color-yellow);
}

.hero-sinhala-tagline {
    position: relative;
    max-width: 720px;
    margin: -0.15rem 0 var(--space-lg);
    padding-left: 18px;
    color: var(--color-yellow);
    font-family:
        "Noto Sans Sinhala",
        "Iskoola Pota",
        "Segoe UI",
        sans-serif;
    font-size: clamp(1.08rem, 2vw, 1.42rem);
    font-weight: 750;
    line-height: 1.7;
    letter-spacing: 0;
}

.hero-sinhala-tagline::before {
    position: absolute;
    top: 0.42em;
    bottom: 0.42em;
    left: 0;
    width: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-yellow);
    content: "";
}

.hero-description {
    max-width: 690px;
    margin-bottom: var(--space-xl);
    color: #d2d2d2;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}


/* =========================================================
   HERO PHOTO AREA
   ========================================================= */

.hero-visual {
    position: relative;
    display: flex;
    min-height: 540px;
    align-items: center;
    justify-content: center;
}

.ai-orbit {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(242, 181, 31, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbit-pulse 6s ease-in-out infinite;
}

.ai-orbit::before,
.ai-orbit::after {
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.ai-orbit::before {
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-orbit::after {
    width: 210px;
    height: 210px;
    border: 1px solid rgba(242, 181, 31, 0.12);
}

.hero-photo-card {
    position: relative;
    z-index: 3;
    width: min(100%, 430px);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.025) 100%);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(242, 181, 31, 0.03) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-photo-card::before {
    position: absolute;
    top: 24px;
    right: -12px;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(242, 181, 31, 0.12);
    content: "";
    filter: blur(1px);
    transform: rotate(16deg);
}

.hero-photo-card::after {
    position: absolute;
    bottom: 82px;
    left: -14px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(242, 181, 31, 0.28);
    border-radius: 50%;
    content: "";
}

.hero-photo-frame {
    position: relative;
    display: flex;
    min-height: 460px;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(242, 181, 31, 0.24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 18%,
            rgba(242, 181, 31, 0.15),
            transparent 42%),
        linear-gradient(180deg,
            #242424 0%,
            #171717 100%);
}

.hero-photo-frame::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 45%,
            transparent 70%);
    content: "";
}

.hero-photo-frame::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    background:
        linear-gradient(180deg,
            transparent,
            rgba(0, 0, 0, 0.34));
    content: "";
    pointer-events: none;
}

.hero-brand-mark {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 1;
    display: block;
    width: min(74%, 280px);
    height: auto;
    pointer-events: none;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 18px rgba(255, 28, 28, 0.34));
}

.hero-photo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 365px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.38));
}

.hero-photo-info {
    position: relative;
    z-index: 3;
    padding-top: 18px;
}

.hero-photo-role {
    margin-bottom: 5px;
    color: var(--color-yellow);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-photo-name {
    margin-bottom: 6px;
    color: var(--color-white);
    font-size: 1.45rem;
    line-height: 1.2;
}

.hero-photo-tagline {
    margin: 0;
    color: #bfbfbf;
    font-size: 0.94rem;
    line-height: 1.5;
}

.hero-photo-badge {
    position: absolute;
    top: 42px;
    left: 2px;
    z-index: 4;
    padding: 0.58rem 0.82rem;
    border: 1px solid rgba(242, 181, 31, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(17, 17, 17, 0.88);
    color: var(--color-yellow);
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
}

@keyframes orbit-pulse {

    0%,
    100% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03);
    }
}


/* =========================================================
   SECTION HEADER BLOCKS
   ========================================================= */

.section-heading {
    max-width: 780px;
    margin-bottom: var(--space-2xl);
}

.section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: var(--space-sm);
    color: var(--color-maroon);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.section-label::before {
    width: 24px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-yellow);
    content: "";
}

.section--dark .section-label {
    color: var(--color-yellow);
}

.section-title {
    margin-bottom: var(--space-md);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.section-description {
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.section--dark .section-description {
    color: #c8c8c8;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card:hover {
    border-color: rgba(242, 181, 31, 0.48);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background:
        linear-gradient(90deg,
            var(--color-yellow),
            #f8d06c);
    content: "";
}

.card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-ash-light);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.card:hover .card__media img {
    transform: scale(1.04);
}

.card__content {
    padding: var(--space-xl);
}

.card__tag {
    display: inline-flex;
    margin-bottom: var(--space-md);
    padding: 0.36rem 0.72rem;
    border-radius: var(--radius-pill);
    background: rgba(242, 181, 31, 0.16);
    color: #725100;
    font-size: 0.76rem;
    font-weight: 850;
}

.card__title {
    margin-bottom: var(--space-sm);
    font-size: 1.35rem;
    font-weight: 850;
}

.card__description {
    margin-bottom: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.card__link {
    color: var(--color-charcoal);
    font-weight: 800;
}

.card__link:hover {
    color: var(--color-maroon);
}

.nav-more {
    position: relative;
}

.nav-more__button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e8e8e8;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.nav-more__button:hover,
.nav-more.is-open .nav-more__button,
.nav-more.is-current .nav-more__button {
    color: var(--color-yellow);
}

.nav-more__button span {
    transition: transform var(--transition);
}

.nav-more.is-open .nav-more__button span {
    transform: rotate(180deg);
}

.nav-more__menu {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    display: none;
    width: 190px;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(31, 31, 31, 0.99);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.nav-more.is-open .nav-more__menu,
.nav-more:focus-within .nav-more__menu {
    display: grid;
}

.nav-more__menu a {
    padding: 0.72rem 0.8rem;
    border-radius: 8px;
}

.nav-more__menu a:hover,
.nav-more__menu a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.06);
}

.nav-more__menu a::after {
    display: none;
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.feature-card {
    position: relative;
    min-height: 100%;
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.02));
}

.feature-card__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: var(--space-lg);
    place-items: center;
    border-radius: 16px;
    background: var(--color-yellow);
    color: var(--color-black);
    font-size: 1.4rem;
    font-weight: 900;
}

.feature-card__title {
    margin-bottom: var(--space-sm);
    color: var(--color-white);
    font-size: 1.3rem;
}

.feature-card__text {
    margin: 0;
    color: #bdbdbd;
}


/* =========================================================
   STATS / TRUST ROW
   ========================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

.stat-card {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-align: center;
}

.stat-card__value {
    margin-bottom: 0.3rem;
    color: var(--color-charcoal);
    font-size: 2rem;
    font-weight: 950;
}

.stat-card__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}


/* =========================================================
   CALLOUT / CTA
   ========================================================= */

.cta-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 85% 20%,
            rgba(242, 181, 31, 0.24),
            transparent 28%),
        linear-gradient(135deg,
            #181818,
            #2a2a2a);
    color: var(--color-white);
}

.cta-panel::after {
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(242, 181, 31, 0.2);
    border-radius: 50%;
    content: "";
}

.cta-panel__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.cta-panel__title {
    margin-bottom: var(--space-md);
    font-size: clamp(2rem, 4vw, 3rem);
}

.cta-panel__text {
    margin-bottom: var(--space-xl);
    color: #c9c9c9;
    font-size: 1.05rem;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 800;
}

.badge--yellow {
    background: rgba(242, 181, 31, 0.18);
    color: #705000;
}

.badge--dark {
    background: var(--color-charcoal);
    color: var(--color-white);
}

.badge--red {
    background: rgba(166, 58, 62, 0.12);
    color: var(--color-maroon);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-group {
    display: grid;
    gap: 0.5rem;
}

.form-label {
    font-weight: 800;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-text);
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-control:focus {
    border-color: var(--color-yellow);
    outline: none;
    box-shadow: 0 0 0 4px rgba(242, 181, 31, 0.14);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}


/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    padding-block: 64px 24px;
    background: #141414;
    color: var(--color-white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl);
}

.site-footer .site-logo {
    margin-bottom: var(--space-lg);
}

.site-footer p {
    max-width: 380px;
    color: #b7b7b7;
}

.footer-title {
    margin-bottom: var(--space-md);
    color: var(--color-white);
    font-size: 1rem;
}

.footer-links {
    display: grid;
    gap: 0.72rem;
    color: #bdbdbd;
}

.footer-links a {
    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-links a:hover {
    color: var(--color-yellow);
    transform: translateX(3px);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #929292;
    font-size: 0.9rem;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-socials a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: var(--color-white);
}

.footer-socials a:hover {
    border-color: var(--color-yellow);
    color: var(--color-yellow);
}


/* =========================================================
   TABLES
   ========================================================= */

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    background: var(--color-charcoal);
    color: var(--color-white);
    font-size: 0.9rem;
}

.data-table tbody tr:hover {
    background: rgba(242, 181, 31, 0.05);
}


/* =========================================================
   Ai ZERO TO HERO IN 7 DAYS — FEATURED COURSE
   ========================================================= */

.course-feature {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(242, 181, 31, 0.2),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #151515 0%,
            #242424 56%,
            #191919 100%
        );
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.course-feature::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        );
    background-size: 38px 38px;
    content: "";
    opacity: 0.45;
    pointer-events: none;
}

.course-feature::after {
    position: absolute;
    right: -130px;
    bottom: -170px;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(242, 181, 31, 0.16);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.course-feature__content,
.course-feature__days {
    position: relative;
    z-index: 2;
}

.course-feature__content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.course-feature__content .badge--yellow {
    background: var(--color-yellow);
    color: var(--color-black);
}

.course-feature__title {
    margin: var(--space-md) 0 var(--space-md);
    color: var(--color-white);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 950;
    letter-spacing: -0.05em;
    line-height: 1;
}

.course-feature__description {
    max-width: 620px;
    margin-bottom: var(--space-xl);
    color: #cccccc;
    font-size: 1.05rem;
    line-height: 1.75;
}

.course-feature__stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.course-feature__stats > div {
    padding: 1rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
}

.course-feature__stats strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-yellow);
    font-size: 1.7rem;
    font-weight: 950;
    line-height: 1;
}

.course-feature__stats span {
    color: #b8b8b8;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.course-feature__days {
    display: grid;
    gap: var(--space-sm);
}

.course-day {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: var(--space-md);
    min-height: 76px;
    padding: 1rem 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.045);
    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.course-day:hover {
    border-color: rgba(242, 181, 31, 0.45);
    background: rgba(242, 181, 31, 0.08);
    transform: translateX(5px);
}

.course-day::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--color-yellow);
    border-right: 2px solid var(--color-yellow);
    content: "";
    opacity: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: opacity var(--transition);
}

.course-day:hover::after {
    opacity: 1;
}

.course-day span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--color-yellow);
    color: var(--color-black);
    font-size: 0.78rem;
    font-weight: 900;
}

.course-day h4 {
    margin: 0;
    padding-right: 18px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}


/* =========================================================
   LEARNING PATHS PREVIEW
   ========================================================= */

.learning-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.learning-path-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.learning-path-card:hover {
    border-color: rgba(242, 181, 31, 0.58);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.learning-path-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--color-yellow),
        #ffd874
    );
    content: "";
}

.learning-path-card__number {
    position: absolute;
    top: 18px;
    right: 22px;
    color: rgba(31, 31, 31, 0.08);
    font-size: 3.6rem;
    font-weight: 950;
    line-height: 1;
}

.learning-path-card__level {
    align-self: flex-start;
    margin-bottom: var(--space-lg);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(242, 181, 31, 0.16);
    color: #6f5000;
    font-size: 0.74rem;
    font-weight: 850;
}

.learning-path-card__title {
    max-width: 85%;
    margin-bottom: var(--space-md);
    color: var(--color-charcoal);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.25;
}

.learning-path-card__description {
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.7;
}

.learning-path-card__topics {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
}

.learning-path-card__topics li {
    position: relative;
    padding-left: 18px;
    color: var(--color-charcoal);
    font-size: 0.92rem;
    font-weight: 700;
}

.learning-path-card__topics li::before {
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-yellow);
    content: "";
}

.learning-path-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    color: var(--color-charcoal);
    font-weight: 850;
}

.learning-path-card__link span {
    color: var(--color-yellow);
    font-size: 1.2rem;
    transition: transform var(--transition);
}

.learning-path-card__link:hover {
    color: var(--color-maroon);
}

.learning-path-card__link:hover span {
    transform: translateX(4px);
}

.section-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}


/* =========================================================
   ALGORITHM SELECTOR HOMEPAGE PREVIEW
   ========================================================= */

.algorithm-preview-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(242, 181, 31, 0.12),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #121212 0%,
            #202020 55%,
            #171717 100%
        );
    color: var(--color-white);
}

.algorithm-preview-section::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        );
    background-size: 40px 40px;
    content: "";
    opacity: 0.45;
    pointer-events: none;
}

.algorithm-preview-section .container {
    position: relative;
    z-index: 2;
}

.algorithm-preview-section .section-label {
    color: var(--color-yellow);
}

.algorithm-preview-section .section-title {
    color: var(--color-white);
}

.algorithm-preview-section .section-description {
    color: #c8c8c8;
}

.algorithm-preview {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4rem);
}

.algorithm-preview__form,
.algorithm-result-preview {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.algorithm-preview__form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.algorithm-preview__step {
    display: inline-flex;
    margin-bottom: var(--space-md);
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(242, 181, 31, 0.25);
    border-radius: var(--radius-pill);
    background: rgba(242, 181, 31, 0.09);
    color: var(--color-yellow);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.algorithm-preview__title {
    margin-bottom: var(--space-sm);
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.algorithm-preview__description {
    margin-bottom: var(--space-xl);
    color: #bdbdbd;
    line-height: 1.7;
}

.selector-question {
    margin-bottom: var(--space-xl);
}

.selector-question__label {
    margin-bottom: var(--space-sm);
    color: var(--color-white);
    font-weight: 800;
}

.selector-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.selector-option {
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.035);
    color: #d6d6d6;
    font-size: 0.88rem;
    font-weight: 750;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.selector-option:hover {
    border-color: rgba(242, 181, 31, 0.5);
    color: var(--color-yellow);
    transform: translateY(-2px);
}

.selector-option.is-selected {
    border-color: var(--color-yellow);
    background: var(--color-yellow);
    color: var(--color-black);
}

.algorithm-preview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-sm);
}

.algorithm-result-preview {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(242, 181, 31, 0.14),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.035);
}

.algorithm-result-preview::after {
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(242, 181, 31, 0.16);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.algorithm-result-preview__header,
.algorithm-result-card,
.algorithm-result-preview__notice {
    position: relative;
    z-index: 2;
}

.algorithm-result-preview__badge {
    display: inline-flex;
    margin-bottom: var(--space-md);
    padding: 0.38rem 0.72rem;
    border-radius: var(--radius-pill);
    background: rgba(242, 181, 31, 0.16);
    color: var(--color-yellow);
    font-size: 0.74rem;
    font-weight: 850;
}

.algorithm-result-preview__title {
    margin-bottom: var(--space-xl);
    color: var(--color-white);
    font-size: 1.7rem;
    line-height: 1.25;
}

.algorithm-result-card {
    margin-bottom: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.algorithm-result-card--best {
    border-color: rgba(242, 181, 31, 0.42);
    background:
        linear-gradient(
            135deg,
            rgba(242, 181, 31, 0.12),
            rgba(255, 255, 255, 0.035)
        );
}

.algorithm-result-card__rank {
    margin-bottom: 0.35rem;
    color: var(--color-yellow);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.algorithm-result-card__title {
    margin-bottom: 0.5rem;
    color: var(--color-white);
    font-size: 1.25rem;
}

.algorithm-result-card__description {
    margin-bottom: 0;
    color: #bdbdbd;
    font-size: 0.92rem;
    line-height: 1.65;
}

.algorithm-result-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: var(--space-md);
}

.algorithm-result-card__meta span {
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    color: #d4d4d4;
    font-size: 0.7rem;
    font-weight: 750;
}

.algorithm-result-preview__notice {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-left: 4px solid var(--color-yellow);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(242, 181, 31, 0.08);
    color: #cfcfcf;
    font-size: 0.84rem;
    line-height: 1.6;
}


/* =========================================================
   INTERNAL PAGE HERO
   ========================================================= */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 52px 86px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(242, 181, 31, 0.18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #111111 0%,
      #232323 58%,
      #171717 100%
    );
  color: var(--color-white);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
  content: "";
  opacity: 0.45;
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 3rem;
  color: #aaaaaa;
  font-size: 0.86rem;
}

.breadcrumb a:hover {
  color: var(--color-yellow);
}

.breadcrumb span[aria-current="page"] {
  color: var(--color-white);
}

.page-hero__grid {
  display: grid;
  align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-lg);
  color: var(--color-yellow);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page-hero__label::before {
  width: 26px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  content: "";
}

.page-hero__title {
  max-width: 850px;
  margin-bottom: var(--space-lg);
  color: var(--color-white);
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.page-hero__description {
  max-width: 720px;
  margin-bottom: var(--space-xl);
  color: #cccccc;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.75;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.page-hero__visual {
  position: relative;
  display: grid;
  min-height: 390px;
  place-items: center;
}


/* =========================================================
   COURSE MAP VISUAL
   ========================================================= */

.course-map-visual {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 181, 31, 0.22);
  border-radius: 50%;
}

.course-map-visual::before,
.course-map-visual::after {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.course-map-visual::before {
  width: 74%;
  height: 74%;
}

.course-map-visual::after {
  width: 46%;
  height: 46%;
}

.course-map-visual__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 105px;
  height: 105px;
  place-items: center;
  border-radius: 30px;
  background: var(--color-yellow);
  color: var(--color-black);
  font-size: 2.2rem;
  font-weight: 950;
  transform: translate(-50%, -50%) rotate(-5deg);
  box-shadow: 0 0 60px rgba(242, 181, 31, 0.25);
}

.course-map-node {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 88px;
  min-height: 42px;
  place-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(242, 181, 31, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 20, 0.9);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 800;
}

.course-map-node--one {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.course-map-node--two {
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
}

.course-map-node--three {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.course-map-node--four {
  top: 50%;
  left: -5%;
  transform: translateY(-50%);
}


/* =========================================================
   COURSE CATALOGUE FEATURE
   ========================================================= */

.course-catalogue-feature {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(242, 181, 31, 0.19),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #151515,
      #242424
    );
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.course-catalogue-feature__content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.course-catalogue-feature__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: var(--space-lg);
}

.course-catalogue-feature__title {
  margin-bottom: 0.55rem;
  color: var(--color-white);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1;
}

.course-catalogue-feature__subtitle {
  margin-bottom: var(--space-lg);
  color: var(--color-yellow);
  font-size: 1.05rem;
  font-weight: 800;
}

.course-catalogue-feature__description {
  margin-bottom: var(--space-xl);
  color: #c8c8c8;
  line-height: 1.75;
}

.course-catalogue-feature__stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: var(--space-xl);
}

.course-catalogue-feature__stats > div {
  padding: 1rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.course-catalogue-feature__stats strong {
  display: block;
  color: var(--color-yellow);
  font-size: 1.65rem;
  font-weight: 950;
}

.course-catalogue-feature__stats span {
  color: #b8b8b8;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.course-catalogue-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.course-catalogue-feature__days {
  display: grid;
  gap: 0.7rem;
}

.catalogue-day {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: var(--space-md);
  min-height: 72px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.catalogue-day:hover {
  border-color: rgba(242, 181, 31, 0.42);
  background: rgba(242, 181, 31, 0.07);
  transform: translateX(5px);
}

.catalogue-day__number {
  color: var(--color-yellow);
  font-size: 1.35rem;
  font-weight: 950;
}

.catalogue-day__label {
  margin-bottom: 0.12rem;
  color: #999999;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.catalogue-day__title {
  margin: 0;
  color: var(--color-white);
  font-size: 0.95rem;
  line-height: 1.35;
}


/* =========================================================
   COURSE LIST CARDS
   ========================================================= */

.course-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.course-list-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.course-list-card:hover {
  border-color: rgba(242, 181, 31, 0.5);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.course-list-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.course-list-card__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: var(--color-charcoal);
  color: var(--color-yellow);
  font-size: 0.9rem;
  font-weight: 950;
}

.course-list-card__title {
  margin-bottom: var(--space-md);
  font-size: 1.35rem;
  font-weight: 900;
}

.course-list-card__description {
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.course-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.course-list-card__meta span {
  padding: 0.32rem 0.58rem;
  border-radius: var(--radius-pill);
  background: var(--color-ash-soft);
  color: var(--color-charcoal);
  font-size: 0.72rem;
  font-weight: 750;
}


/* =========================================================
   LEARNING CYCLE
   ========================================================= */

.learning-cycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.learning-cycle__item {
  padding: var(--space-xl);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

.learning-cycle__item span {
  display: inline-flex;
  margin-bottom: var(--space-md);
  color: var(--color-yellow);
  font-size: 0.8rem;
  font-weight: 900;
}

.learning-cycle__item h3 {
  margin-bottom: var(--space-sm);
  color: var(--color-white);
  font-size: 1.35rem;
}

.learning-cycle__item p {
  margin: 0;
  color: #bdbdbd;
  line-height: 1.7;
}


/* =========================================================
   COURSE OVERVIEW PAGE
   ========================================================= */

.course-overview-hero {
  position: relative;
  overflow: hidden;
  padding-block: 48px 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(242, 181, 31, 0.2), transparent 28%),
    linear-gradient(135deg, #111111 0%, #242424 58%, #171717 100%);
  color: var(--color-white);
}

.course-overview-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  opacity: 0.45;
  pointer-events: none;
}

.course-overview-hero .container {
  position: relative;
  z-index: 2;
}

.course-overview-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.course-overview-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: var(--space-lg);
}

.badge--course-dark {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #dddddd;
}

.course-overview-hero__title {
  max-width: 820px;
  margin-bottom: var(--space-md);
  color: var(--color-white);
  font-size: clamp(3.2rem, 6.5vw, 6.2rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.course-overview-hero__title span {
  display: block;
  color: var(--color-yellow);
}

.course-overview-hero__subtitle {
  margin-bottom: var(--space-md);
  color: var(--color-white);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.45;
}

.course-overview-hero__description {
  max-width: 720px;
  margin-bottom: var(--space-xl);
  color: #c9c9c9;
  font-size: 1.05rem;
  line-height: 1.75;
}

.course-overview-hero__actions,
.course-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.course-overview-hero__video-note {
  max-width: 640px;
  margin-top: var(--space-md);
  color: #999999;
  font-size: 0.78rem;
  line-height: 1.55;
}

.course-overview-hero__visual {
  display: grid;
  min-height: 440px;
  place-items: center;
}

.seven-day-orbit {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 181, 31, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(242, 181, 31, 0.08);
}

.seven-day-orbit::before,
.seven-day-orbit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.seven-day-orbit::before {
  width: 72%;
  height: 72%;
}

.seven-day-orbit::after {
  width: 46%;
  height: 46%;
}

.seven-day-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border-radius: 34px;
  background: var(--color-yellow);
  color: var(--color-black);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-5deg);
  box-shadow: 0 0 60px rgba(242, 181, 31, 0.25);
}

.seven-day-orbit__core strong,
.seven-day-orbit__core span {
  display: block;
}

.seven-day-orbit__core strong {
  align-self: end;
  font-size: 2.8rem;
  font-weight: 950;
  line-height: 0.9;
}

.seven-day-orbit__core span {
  align-self: start;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seven-day-node {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(242, 181, 31, 0.45);
  border-radius: 50%;
  background: #202020;
  color: var(--color-yellow);
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.seven-day-node--1 { top: -6%; left: 50%; transform: translateX(-50%); }
.seven-day-node--2 { top: 14%; right: 4%; }
.seven-day-node--3 { top: 56%; right: -5%; }
.seven-day-node--4 { right: 20%; bottom: -2%; }
.seven-day-node--5 { bottom: -2%; left: 20%; }
.seven-day-node--6 { top: 56%; left: -5%; }
.seven-day-node--7 { top: 14%; left: 4%; }

.course-overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.course-overview-stat {
  padding: 1.4rem 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.course-overview-stat:last-child {
  border-right: 0;
}

.course-overview-stat strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--color-yellow);
  font-size: 1.9rem;
  font-weight: 950;
}

.course-overview-stat span {
  color: #bdbdbd;
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}

.course-promise {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.course-promise__title {
  margin: var(--space-md) 0 var(--space-lg);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.course-promise__description {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.course-promise__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.promise-column {
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.promise-column--positive { border-top: 5px solid var(--color-yellow); }
.promise-column--warning { border-top: 5px solid var(--color-maroon); }

.promise-column h3 {
  margin-bottom: var(--space-lg);
  font-size: 1.2rem;
  line-height: 1.35;
}

.promise-column ul {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promise-column li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.promise-column li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-yellow);
  content: "";
}

.promise-column--warning li::before { background: var(--color-maroon); }

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.audience-card {
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.audience-card__icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-lg);
  place-items: center;
  border-radius: 15px;
  background: var(--color-charcoal);
  color: var(--color-yellow);
  font-weight: 950;
}

.audience-card h3 { margin-bottom: var(--space-sm); font-size: 1.25rem; }
.audience-card p { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

.course-outcomes-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.course-outcomes-layout__intro {
  position: sticky;
  top: 110px;
}

.course-outcomes-layout__intro .button { margin-top: var(--space-lg); }

.course-outcomes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.course-outcome-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.course-outcome-item span {
  color: var(--color-yellow-dark, #9a6c00);
  font-size: 0.78rem;
  font-weight: 950;
}

.course-outcome-item p { margin: 0; color: var(--color-text-muted); line-height: 1.65; }

.course-curriculum-section {
  background: linear-gradient(180deg, var(--color-ash-soft), #ffffff);
}

.course-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.full-course-day {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.full-course-day:hover {
  border-color: rgba(242, 181, 31, 0.55);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.full-course-day--active {
  border-color: rgba(242, 181, 31, 0.55);
  background: linear-gradient(145deg, rgba(242, 181, 31, 0.11), #ffffff 42%);
}

.full-course-day__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.full-course-day__number { color: var(--color-charcoal); font-size: 0.82rem; font-weight: 950; text-transform: uppercase; }

.full-course-day__status {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  color: var(--color-black);
  font-size: 0.7rem;
  font-weight: 850;
}

.full-course-day__status--soon { background: var(--color-ash-soft); color: var(--color-text-muted); }

.full-course-day__title {
  margin-bottom: var(--space-md);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.25;
}

.full-course-day__outcome { margin-bottom: var(--space-lg); color: var(--color-text-muted); line-height: 1.7; }

.full-course-day__topics {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.full-course-day__topics li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--color-charcoal);
  font-size: 0.9rem;
  font-weight: 650;
}

.full-course-day__topics li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-yellow);
  content: "";
}

.full-course-day__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: auto;
}

.course-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-charcoal);
  font-size: 0.84rem;
  font-weight: 800;
}

.course-video-link:hover { color: var(--color-maroon); }
.course-video-link span { color: var(--color-yellow-dark, #9a6c00); }

.daily-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.daily-format-card {
  padding: var(--space-xl);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.daily-format-card span { display: inline-block; margin-bottom: var(--space-md); color: var(--color-yellow); font-size: 0.8rem; font-weight: 950; }
.daily-format-card h3 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: 1.3rem; }
.daily-format-card p { margin: 0; color: #bdbdbd; line-height: 1.7; }

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.evidence-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.evidence-card__number { margin-bottom: var(--space-lg); color: var(--color-yellow-dark, #9a6c00); font-size: 0.8rem; font-weight: 950; }
.evidence-card h3 { margin-bottom: var(--space-md); font-size: 1.3rem; }
.evidence-card p { margin-bottom: var(--space-lg); color: var(--color-text-muted); line-height: 1.7; }
.evidence-card strong { margin-top: auto; color: var(--color-maroon); font-size: 0.85rem; }

.solution-canvas-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.solution-canvas-layout__intro .button { margin-top: var(--space-lg); }

.solution-canvas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.solution-canvas-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: var(--space-md);
  min-height: 78px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.solution-canvas-grid span { color: var(--color-yellow-dark, #9a6c00); font-size: 0.76rem; font-weight: 950; }
.solution-canvas-grid h3 { margin: 0; font-size: 1rem; }

.course-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.course-resource-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.course-resource-card__type {
  align-self: flex-start;
  margin-bottom: var(--space-lg);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(242, 181, 31, 0.16);
  color: #6f5000;
  font-size: 0.72rem;
  font-weight: 850;
}

.course-resource-card h3 { margin-bottom: var(--space-md); font-size: 1.25rem; }
.course-resource-card p { margin-bottom: var(--space-lg); color: var(--color-text-muted); line-height: 1.7; }
.course-resource-card > a { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; color: var(--color-charcoal); font-weight: 850; }
.course-resource-card > a:hover { color: var(--color-maroon); }
.course-resource-card > a span { color: var(--color-yellow-dark, #9a6c00); }

.course-boundary-section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--color-charcoal);
}

.course-boundary {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(242, 181, 31, 0.25);
  border-radius: var(--radius-lg);
  background: rgba(242, 181, 31, 0.07);
}

.course-boundary__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 20px;
  background: var(--color-yellow);
  color: var(--color-black);
  font-size: 2rem;
  font-weight: 950;
}

.course-boundary__label { display: inline-block; margin-bottom: 0.45rem; color: var(--color-yellow); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.course-boundary h2 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.course-boundary p { max-width: 900px; margin: 0; color: #c7c7c7; line-height: 1.7; }


/* =========================================================
   LEARNING PATHS CATALOGUE PAGE
   ========================================================= */

.paths-page-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(242, 181, 31, 0.2), transparent 30%),
    linear-gradient(135deg, #111111 0%, #242424 58%, #171717 100%);
}

.path-map-visual {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 181, 31, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(242, 181, 31, 0.09), transparent 55%);
}

.path-map-visual::before,
.path-map-visual::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.path-map-visual::before { width: 72%; height: 72%; }
.path-map-visual::after { width: 45%; height: 45%; }

.path-map-visual__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 122px;
  height: 122px;
  place-items: center;
  border-radius: 34px;
  background: var(--color-yellow);
  color: var(--color-black);
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-5deg);
  box-shadow: 0 0 60px rgba(242, 181, 31, 0.25);
}

.path-map-node {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 92px;
  min-height: 42px;
  place-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(242, 181, 31, 0.4);
  border-radius: var(--radius-pill);
  background: #202020;
  color: var(--color-white);
  font-size: 0.74rem;
  font-weight: 850;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.path-map-node--one { top: -4%; left: 50%; transform: translateX(-50%); }
.path-map-node--two { top: 25%; right: -8%; }
.path-map-node--three { right: 7%; bottom: 5%; }
.path-map-node--four { bottom: 5%; left: 7%; }
.path-map-node--five { top: 25%; left: -8%; }

.path-foundation-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 10% 10%, rgba(242, 181, 31, 0.2), transparent 30%),
    linear-gradient(135deg, #151515, #252525);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.path-foundation-card__content { position: relative; z-index: 2; }

.path-foundation-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: var(--space-lg);
}

.path-foundation-card h2 {
  margin-bottom: var(--space-md);
  color: var(--color-white);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1;
}

.path-foundation-card__subtitle {
  max-width: 680px;
  margin-bottom: var(--space-xl);
  color: #c8c8c8;
  font-size: 1.05rem;
  line-height: 1.75;
}

.path-foundation-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: var(--space-xl);
}

.path-foundation-card__stats span {
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: #bdbdbd;
  font-size: 0.76rem;
  font-weight: 750;
}

.path-foundation-card__stats strong { color: var(--color-yellow); font-size: 1rem; }

.path-foundation-card__route {
  position: relative;
  display: grid;
  min-height: 290px;
  place-items: center;
}

.path-foundation-card__route::before,
.path-foundation-card__route::after {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 74px;
  background: linear-gradient(var(--color-yellow), rgba(242, 181, 31, 0.15));
  content: "";
  transform: translateX(-50%);
}

.path-foundation-card__route::before { top: 38px; }
.path-foundation-card__route::after { bottom: 38px; transform: translateX(-50%) rotate(180deg); }

.path-foundation-card__route span,
.path-foundation-card__route strong {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 170px;
  min-height: 58px;
  place-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-pill);
  text-align: center;
}

.path-foundation-card__route span { top: 0; border: 1px solid rgba(255, 255, 255, 0.12); background: #252525; color: #dddddd; font-weight: 800; }
.path-foundation-card__route strong { bottom: 0; background: var(--color-yellow); color: var(--color-black); }

.path-foundation-card__route i {
  width: 88px;
  height: 88px;
  border: 1px solid rgba(242, 181, 31, 0.25);
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px rgba(242, 181, 31, 0.05);
}

.path-finder {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.path-finder__questions {
  display: grid;
  gap: var(--space-lg);
}

.path-finder__group {
  min-width: 0;
  margin: 0;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.path-finder__group legend {
  padding: 0 0.35rem;
  color: var(--color-charcoal);
  font-size: 1rem;
  font-weight: 900;
}

.path-finder__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

.path-finder__options button {
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-ash-soft);
  color: var(--color-charcoal);
  font-size: 0.86rem;
  font-weight: 750;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.path-finder__options button:hover { border-color: rgba(242, 181, 31, 0.55); transform: translateY(-2px); }

.path-finder__options button.is-selected {
  border-color: var(--color-yellow);
  background: var(--color-yellow);
  color: var(--color-black);
}

.path-finder__result {
  position: sticky;
  top: 110px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(242, 181, 31, 0.18), transparent 32%),
    var(--color-charcoal);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.path-finder__result-label {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--color-yellow);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.path-finder__result h3 { margin-bottom: var(--space-md); color: var(--color-white); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.path-finder__result p { margin-bottom: var(--space-xl); color: #c8c8c8; line-height: 1.7; }
.path-finder__result small { display: block; margin-top: var(--space-md); color: #999999; line-height: 1.5; }

.path-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.path-catalogue-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.path-catalogue-card:hover { border-color: rgba(242, 181, 31, 0.55); transform: translateY(-5px); box-shadow: var(--shadow-md); }

.path-catalogue-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.path-catalogue-card__top > span { color: rgba(31, 31, 31, 0.18); font-size: 2.5rem; font-weight: 950; line-height: 1; }
.path-catalogue-card__top em { padding: 0.35rem 0.65rem; border-radius: var(--radius-pill); background: rgba(242, 181, 31, 0.16); color: #6f5000; font-size: 0.7rem; font-style: normal; font-weight: 850; }
.path-catalogue-card h3 { margin-bottom: var(--space-md); font-size: 1.45rem; font-weight: 900; line-height: 1.25; }
.path-catalogue-card > p { margin-bottom: var(--space-lg); color: var(--color-text-muted); line-height: 1.7; }

.path-catalogue-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 var(--space-lg);
}

.path-catalogue-card dl div { padding: 0.75rem; border-radius: var(--radius-sm); background: var(--color-ash-soft); }
.path-catalogue-card dt { margin-bottom: 0.2rem; color: var(--color-text-muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.path-catalogue-card dd { margin: 0; color: var(--color-charcoal); font-size: 0.8rem; font-weight: 800; }

.path-catalogue-card ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.path-catalogue-card li { padding: 0.32rem 0.55rem; border-radius: var(--radius-pill); background: rgba(242, 181, 31, 0.13); color: #6f5000; font-size: 0.7rem; font-weight: 750; }
.path-catalogue-card > strong { margin-bottom: var(--space-xl); color: var(--color-maroon); font-size: 0.82rem; }
.path-catalogue-card > a { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; color: var(--color-charcoal); font-weight: 850; }
.path-catalogue-card > a:hover { color: var(--color-maroon); }
.path-catalogue-card > a span { color: var(--color-yellow-dark, #9a6c00); font-size: 1.15rem; }

.path-comparison-wrapper { box-shadow: var(--shadow-sm); }
.path-comparison-table th { white-space: nowrap; }
.path-comparison-table tbody th { padding: 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-charcoal); font-size: 0.88rem; }
.path-comparison-table td { color: var(--color-text-muted); font-size: 0.86rem; }

.path-connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.path-connection-grid a {
  display: block;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-charcoal);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.path-connection-grid a:hover { border-color: rgba(242, 181, 31, 0.55); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.path-connection-grid span { display: inline-block; margin-bottom: var(--space-lg); color: var(--color-yellow-dark, #9a6c00); font-size: 0.78rem; font-weight: 950; }
.path-connection-grid h3 { margin-bottom: var(--space-sm); font-size: 1.25rem; }
.path-connection-grid p { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

.path-boundary-section { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--color-charcoal); }

.path-boundary {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(242, 181, 31, 0.25);
  border-radius: var(--radius-lg);
  background: rgba(242, 181, 31, 0.07);
}

.path-boundary__icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: var(--color-yellow); color: var(--color-black); font-size: 2rem; font-weight: 950; }
.path-boundary__label { display: inline-block; margin-bottom: 0.45rem; color: var(--color-yellow); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.path-boundary h2 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.path-boundary p { max-width: 940px; margin: 0; color: #c7c7c7; line-height: 1.7; }

.paths-final-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }


/* =========================================================
   Ai ALGORITHM SELECTOR PAGE
   ========================================================= */

.selector-page-hero {
  background:
    radial-gradient(circle at 82% 15%, rgba(242, 181, 31, 0.2), transparent 29%),
    linear-gradient(135deg, #111111 0%, #242424 58%, #171717 100%);
}

.selector-hero-visual {
  position: relative;
  display: grid;
  min-height: 370px;
  place-items: center;
}

.selector-hero-visual::before,
.selector-hero-visual::after {
  position: absolute;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-yellow));
  content: "";
}

.selector-hero-visual::before { right: 50%; width: 135px; transform: translate(-60px, -50%); }
.selector-hero-visual::after { left: 50%; width: 135px; transform: translate(60px, -50%) rotate(180deg); }

.selector-hero-visual__engine {
  position: relative;
  z-index: 3;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border-radius: 42px;
  background: var(--color-yellow);
  color: var(--color-black);
  text-align: center;
  transform: rotate(-5deg);
  box-shadow: 0 0 70px rgba(242, 181, 31, 0.3);
}

.selector-hero-visual__engine strong { align-self: end; font-size: 3.2rem; line-height: 0.9; }
.selector-hero-visual__engine span { align-self: start; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }

.selector-hero-visual__input,
.selector-hero-visual__output {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 128px;
  min-height: 50px;
  place-items: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(242, 181, 31, 0.35);
  border-radius: var(--radius-pill);
  background: #202020;
  color: var(--color-white);
  font-size: 0.76rem;
  font-weight: 850;
}

.selector-hero-visual__input { left: 0; }
.selector-hero-visual__output { right: 0; }

.selector-boundary-intro { padding-block: 1.4rem; background: var(--color-charcoal); }

.selector-boundary-intro .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.selector-trust-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.selector-trust-strip span { padding: 0.35rem 0.65rem; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-pill); color: #d0d0d0; font-size: 0.7rem; font-weight: 750; }
.selector-boundary-intro p { max-width: 620px; margin: 0; color: #bdbdbd; font-size: 0.8rem; line-height: 1.55; }
.selector-boundary-intro strong { color: var(--color-yellow); }

.guided-selector-section { background: linear-gradient(180deg, #ececec, #f7f7f7); }

.selector-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: start;
  gap: var(--space-xl);
}

.guided-selector-panel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.guided-selector-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.guided-selector-panel__header h2 { margin-top: 0.45rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }

.selector-reset {
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-ash-soft);
  color: var(--color-charcoal);
  font-size: 0.78rem;
  font-weight: 850;
}

.selector-reset:hover { border-color: var(--color-yellow); }

.selector-progress { padding: 0 var(--space-xl) var(--space-xl); }
.selector-progress__meta { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: 0.55rem; color: var(--color-text-muted); font-size: 0.74rem; font-weight: 750; }
.selector-progress__track { height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-ash-soft); }
.selector-progress__track span { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-yellow), #ffd66b); transition: width var(--transition); }

.selector-selection-summary {
  margin: 0 var(--space-xl) var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-ash-soft);
}

.selector-selection-summary__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.selector-selection-summary__header span {
  color: #795900;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selector-selection-summary__header h3 {
  margin-top: 0.25rem;
  font-size: 1rem;
}

.selector-selection-summary__header small {
  max-width: 210px;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.4;
  text-align: right;
}

.selector-selection-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.selector-selection-summary__grid button {
  min-width: 0;
  min-height: 64px;
  padding: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-charcoal);
  text-align: left;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.selector-selection-summary__grid button:not(:disabled):hover {
  border-color: var(--color-yellow);
  background: rgba(242, 181, 31, 0.08);
  transform: translateY(-2px);
}

.selector-selection-summary__grid button.is-current {
  border-color: var(--color-yellow);
  box-shadow: inset 3px 0 0 var(--color-yellow);
}

.selector-selection-summary__grid button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.selector-selection-summary__grid span,
.selector-selection-summary__grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-selection-summary__grid span {
  margin-bottom: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.selector-selection-summary__grid strong {
  color: var(--color-charcoal);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: nowrap;
}

#algorithm-selector-form { border-top: 1px solid var(--color-border); }

.selector-step { min-height: 560px; padding: var(--space-xl); }
.selector-step__eyebrow { display: inline-block; margin-bottom: 0.45rem; color: #795900; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.selector-step h3 { margin-bottom: var(--space-sm); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; }
.selector-step > p { margin-bottom: var(--space-xl); color: var(--color-text-muted); line-height: 1.65; }

.selector-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.selector-choice-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.selector-choice-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.selector-choice-grid button {
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-charcoal);
  text-align: left;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.selector-choice-grid--compact button { min-height: 50px; align-items: center; text-align: center; font-size: 0.82rem; font-weight: 800; }
.selector-choice-grid button strong { font-size: 0.9rem; }
.selector-choice-grid button small { margin-top: 0.25rem; color: var(--color-text-muted); font-size: 0.7rem; line-height: 1.4; }
.selector-choice-grid button:hover:not(:disabled) { border-color: rgba(242,181,31,0.65); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.selector-choice-grid button.is-selected { border-color: var(--color-yellow); background: rgba(242,181,31,0.14); box-shadow: inset 4px 0 0 var(--color-yellow); }
.selector-choice-grid button.is-disabled { opacity: 0.35; cursor: not-allowed; }

.selector-choice-limit { display: block; margin-top: var(--space-md); color: var(--color-text-muted); font-size: 0.76rem; font-weight: 750; }

.selector-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.button--outline-dark { border: 1px solid var(--color-border); background: transparent; color: var(--color-charcoal); }
.button--outline-dark:hover { border-color: var(--color-charcoal); background: var(--color-ash-soft); }
.selector-navigation .button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.selector-results {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, rgba(242,181,31,0.17), transparent 28%),
    var(--color-charcoal);
  color: var(--color-white);
  box-shadow: 0 24px 70px rgba(0,0,0,0.25);
  scrollbar-color: rgba(242,181,31,0.45) transparent;
}

.selector-results__header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(31,31,31,0.95);
  backdrop-filter: blur(12px);
}

.selector-results__header > div > span { color: var(--color-yellow); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.selector-results__header h2 { margin-top: 0.3rem; color: var(--color-white); font-size: 1.55rem; }
.selector-results__count { padding: 0.35rem 0.6rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.07); color: #c8c8c8; font-size: 0.68rem; font-weight: 750; white-space: nowrap; }

.selector-loading,
.selector-empty,
.selector-no-match { padding: clamp(2rem,5vw,4rem) var(--space-xl); text-align: center; }
.selector-loading { color: #bdbdbd; }
.selector-empty strong,
.selector-no-match strong { display: block; margin-bottom: var(--space-sm); color: var(--color-white); font-size: 1.2rem; }
.selector-empty p,
.selector-no-match p { margin: 0; color: #aaaaaa; line-height: 1.65; }

.selector-best { margin: var(--space-lg); padding: var(--space-xl); border: 1px solid rgba(242,181,31,0.42); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(242,181,31,0.13), rgba(255,255,255,0.035)); }
.selector-best__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.selector-best__rank { color: var(--color-yellow); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.selector-match-score { color: #bdbdbd; font-size: 0.68rem; }
.selector-match-score strong { color: var(--color-yellow); font-size: 1.25rem; }
.selector-best h3 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: 1.8rem; }
.selector-best > p { color: #c7c7c7; line-height: 1.65; }

.selector-result-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-md); }
.selector-result-tags span { padding: 0.3rem 0.5rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); color: #d2d2d2; font-size: 0.66rem; font-weight: 750; text-transform: capitalize; }
.selector-match-reasons { display: grid; gap: 0.5rem; margin: var(--space-lg) 0; padding: 0; list-style: none; }
.selector-match-reasons li { position: relative; padding-left: 1.1rem; color: #d0d0d0; font-size: 0.82rem; }
.selector-match-reasons li::before { position: absolute; top: 0.5em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-yellow); content: ""; }

.selector-result-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.selector-compare-button { min-height: 44px; padding: 0.65rem 0.8rem; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-pill); background: rgba(255,255,255,0.04); color: #d3d3d3; font-size: 0.74rem; font-weight: 800; }
.selector-compare-button:hover,
.selector-compare-button.is-selected { border-color: var(--color-yellow); color: var(--color-yellow); }

.selector-alternatives,
.selector-advanced,
.selector-guidance { padding: 0 var(--space-lg) var(--space-lg); }
.selector-result-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.selector-result-heading span { color: var(--color-white); font-size: 0.86rem; font-weight: 900; }
.selector-result-heading small { color: #888888; font-size: 0.66rem; }

.selector-alternative-card { margin-bottom: 0.65rem; padding: var(--space-lg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); }
.selector-alternative-card > div:first-child { display: flex; justify-content: space-between; gap: var(--space-md); }
.selector-alternative-card > div:first-child span { color: var(--color-white); font-weight: 850; }
.selector-alternative-card > div:first-child strong { color: var(--color-yellow); font-size: 0.75rem; }
.selector-alternative-card p { margin: 0.5rem 0 0; color: #bdbdbd; font-size: 0.78rem; line-height: 1.55; }
.selector-alternative-card .selector-compare-button { margin-top: var(--space-md); }
.selector-result-note { color: #999999; font-size: 0.8rem; }

.selector-guidance__block { margin-bottom: 0.65rem; padding: var(--space-lg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); background: rgba(255,255,255,0.035); }
.selector-guidance__block--warning { border-left: 4px solid var(--color-yellow); }
.selector-guidance__block h3 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: 0.9rem; }
.selector-guidance__block ul { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.1rem; color: #bdbdbd; font-size: 0.76rem; line-height: 1.5; }
.selector-guidance__block p { margin: var(--space-sm) 0 0; color: #bdbdbd; font-size: 0.76rem; line-height: 1.5; }
.selector-metric-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.selector-metric-list span { padding: 0.3rem 0.5rem; border-radius: var(--radius-pill); background: rgba(242,181,31,0.12); color: var(--color-yellow); font-size: 0.68rem; font-weight: 750; }
.selector-validation-reminder { margin: var(--space-md) 0 0; padding: var(--space-md); border-radius: var(--radius-sm); background: rgba(242,181,31,0.08); color: #cfcfcf; font-size: 0.76rem; line-height: 1.55; }

.selector-comparison { margin-top: var(--space-2xl); padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); }
.selector-comparison__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.selector-comparison__header h2 { margin-top: 0.4rem; }
.selector-comparison__header > button { padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-ash-soft); color: var(--color-charcoal); font-size: 0.72rem; font-weight: 800; }
.selector-comparison__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-md); }
.selector-comparison-card { position: relative; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ash-soft); }
.selector-comparison-card > button { position: absolute; top: 10px; right: 10px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: var(--color-white); color: var(--color-charcoal); font-size: 1.2rem; }
.selector-comparison-card > span { display: inline-block; margin-bottom: var(--space-sm); color: #795900; font-size: 0.68rem; font-weight: 850; text-transform: uppercase; }
.selector-comparison-card h3 { max-width: 85%; margin-bottom: var(--space-lg); font-size: 1.1rem; }
.selector-comparison-card dl { display: grid; gap: 0.5rem; margin: 0 0 var(--space-lg); }
.selector-comparison-card dl div { display: flex; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); }
.selector-comparison-card dt { color: var(--color-text-muted); font-size: 0.68rem; }
.selector-comparison-card dd { margin: 0; color: var(--color-charcoal); font-size: 0.68rem; font-weight: 800; text-transform: capitalize; }
.selector-comparison-card p { color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.5; }

.selector-method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-lg); }
.selector-method-grid article { padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); }
.selector-method-grid span { display: inline-block; margin-bottom: var(--space-lg); color: #795900; font-size: 0.78rem; font-weight: 950; }
.selector-method-grid h3 { margin-bottom: var(--space-sm); font-size: 1.25rem; }
.selector-method-grid p { margin: 0; color: var(--color-text-muted); line-height: 1.7; }

.selector-validation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-lg); }
.selector-validation-grid article { padding: var(--space-xl); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); }
.selector-validation-grid span { display: inline-block; margin-bottom: var(--space-md); color: var(--color-yellow); font-size: 0.78rem; font-weight: 950; }
.selector-validation-grid h3 { margin-bottom: var(--space-sm); color: var(--color-white); font-size: 1.25rem; }
.selector-validation-grid p { margin: 0; color: #bdbdbd; line-height: 1.7; }

.selector-privacy-boundary { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: var(--space-xl); padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-ash-soft); }
.selector-privacy-boundary__icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: var(--color-yellow); color: var(--color-black); font-size: 2rem; font-weight: 950; }
.selector-privacy-boundary h2 { margin: 0.45rem 0 var(--space-sm); font-size: clamp(1.5rem,3vw,2.2rem); }
.selector-privacy-boundary p { max-width: 980px; margin: 0; color: var(--color-text-muted); line-height: 1.7; }
.selector-final-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }


/* =========================================================
   Ai ALGORITHM LIBRARY
   ========================================================= */

.algorithm-library-hero { padding-bottom: 0; background: radial-gradient(circle at 82% 15%, rgba(242,181,31,.2), transparent 29%), linear-gradient(135deg,#111 0%,#242424 58%,#171717 100%); }
.library-hero-graph { position: relative; width: min(100%,390px); aspect-ratio: 1; border: 1px solid rgba(242,181,31,.28); border-radius: 50%; }
.library-hero-graph::before,.library-hero-graph::after { position:absolute; top:50%; left:50%; border:1px solid rgba(255,255,255,.1); border-radius:50%; content:""; transform:translate(-50%,-50%); }
.library-hero-graph::before { width:72%; height:72%; }.library-hero-graph::after { width:44%; height:44%; }
.library-hero-graph>strong { position:absolute; top:50%; left:50%; z-index:3; display:grid; width:118px; height:118px; place-items:center; border-radius:34px; background:var(--color-yellow); color:var(--color-black); font-size:.82rem; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-5deg); box-shadow:0 0 60px rgba(242,181,31,.25); }
.library-hero-node { position:absolute; z-index:4; display:grid; min-width:96px; min-height:42px; place-items:center; padding:.45rem .7rem; border:1px solid rgba(242,181,31,.4); border-radius:var(--radius-pill); background:#202020; color:var(--color-white); font-size:.72rem; font-weight:850; }
.library-hero-node--problem{top:-5%;left:50%;transform:translateX(-50%)}.library-hero-node--family{top:30%;right:-9%}.library-hero-node--metric{right:5%;bottom:3%}.library-hero-node--project{bottom:3%;left:5%}
.library-global-search { position:relative; z-index:5; padding:var(--space-xl); border:1px solid rgba(255,255,255,.09); border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:rgba(255,255,255,.05); backdrop-filter:blur(12px); }
.library-global-search label { display:block; margin-bottom:.55rem; color:var(--color-yellow); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.library-global-search>div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); background:rgba(0,0,0,.24); }
.library-global-search input { width:100%; border:0; outline:0; background:transparent; color:var(--color-white); font-size:1rem; }.library-global-search input::placeholder{color:#8f8f8f}.library-global-search kbd{padding:.2rem .45rem;border:1px solid rgba(255,255,255,.15);border-radius:5px;color:#aaa;font-size:.68rem}.library-global-search p{margin:.55rem 0 0;color:#999;font-size:.72rem}

.library-selector-bridge { padding-block:var(--space-xl); background:var(--color-white); }.library-selector-bridge .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl)}.library-selector-bridge h2{margin:.4rem 0 .35rem;font-size:clamp(1.45rem,3vw,2.1rem)}.library-selector-bridge p{margin:0;color:var(--color-text-muted)}
.library-view-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-bottom:var(--space-2xl); }
.library-view-controls button { display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; gap:.1rem .65rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-white); color:var(--color-charcoal); text-align:left; transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition); }
.library-view-controls button:hover,.library-view-controls button.is-active { border-color:var(--color-yellow); transform:translateY(-3px); box-shadow:var(--shadow-sm); }.library-view-controls button.is-active{box-shadow:inset 4px 0 0 var(--color-yellow),var(--shadow-sm)}.library-view-controls span{grid-row:1/3;align-self:center;color:#9a6c00;font-size:.75rem;font-weight:950}.library-view-controls strong{font-size:.85rem}.library-view-controls small{color:var(--color-text-muted);font-size:.68rem}
.library-featured { margin-bottom:var(--space-2xl); padding:clamp(1.5rem,4vw,2.5rem); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-white); box-shadow:var(--shadow-sm); }.library-featured__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-xl)}.library-featured__header h2{margin-top:.4rem}.library-featured__header>span{padding:.35rem .65rem;border-radius:var(--radius-pill);background:var(--color-ash-soft);color:var(--color-text-muted);font-size:.7rem;font-weight:750}.library-featured__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.library-loading,.library-error{padding:var(--space-2xl);border-radius:var(--radius-lg);background:var(--color-white);text-align:center;color:var(--color-text-muted)}.library-error strong{color:var(--color-maroon)}
.library-view-panel { padding:clamp(1.5rem,4vw,2.5rem); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-white); box-shadow:var(--shadow-sm); }.library-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-xl);margin-bottom:var(--space-xl)}.library-panel-heading h2{margin:.4rem 0 .3rem;font-size:clamp(1.7rem,3vw,2.5rem)}.library-panel-heading p{margin:0;color:var(--color-text-muted)}.library-panel-heading>button,.library-panel-heading label{padding:.55rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-ash-soft);color:var(--color-charcoal);font-size:.72rem;font-weight:800}.library-panel-heading label{display:grid;gap:.35rem}.library-panel-heading select{min-width:210px;border:0;background:transparent;color:var(--color-charcoal);font-weight:750}

.algorithm-tree-root>div { display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-md);background:var(--color-charcoal);color:var(--color-white); }.algorithm-tree-root>div span{color:var(--color-yellow);font-size:.75rem}.algorithm-tree-node{margin-top:.55rem;margin-left:calc(var(--depth,0)*1rem);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white)}.algorithm-tree-node summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:.9rem 1rem;cursor:pointer;list-style:none;font-weight:850}.algorithm-tree-node summary::-webkit-details-marker{display:none}.algorithm-tree-node summary::before{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--color-ash-soft);content:"+"}.algorithm-tree-node[open]>summary::before{content:"−";background:var(--color-yellow)}.algorithm-tree-node summary span{flex:1}.algorithm-tree-node summary em{color:var(--color-text-muted);font-size:.68rem;font-style:normal;font-weight:700}.algorithm-tree-node__content{padding:0 .65rem .65rem 1.4rem;border-top:1px solid var(--color-border)}.algorithm-tree-node[data-tree-depth="1"]{margin-left:1rem}.algorithm-tree-node[data-tree-depth="2"]{margin-left:2rem}.algorithm-tree-node[data-tree-depth="3"]{margin-left:3rem}.algorithm-tree-leaf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-top:.5rem;padding:.75rem;border-radius:var(--radius-sm);background:var(--color-ash-soft);color:var(--color-charcoal);font-weight:800}.algorithm-tree-leaf:hover{background:rgba(242,181,31,.12)}.algorithm-tree-leaf em{color:var(--color-text-muted);font-size:.65rem;font-style:normal}

.problem-browser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.problem-browser-grid button{display:flex;min-height:120px;align-items:flex-start;flex-direction:column;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);text-align:left;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.problem-browser-grid button:hover,.problem-browser-grid button.is-selected{border-color:var(--color-yellow);transform:translateY(-3px);box-shadow:var(--shadow-sm)}.problem-browser-grid span{margin-bottom:auto;color:#9a6c00;font-size:.72rem;font-weight:950}.problem-browser-grid strong{margin:.6rem 0 .25rem}.problem-browser-grid small{color:var(--color-text-muted)}.problem-browser-result{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-xl);margin-top:var(--space-xl);padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--color-ash-soft)}.problem-browser-result__intro h3{margin:.4rem 0 var(--space-lg);font-size:2rem}.problem-browser-result__intro dl{display:grid;gap:.6rem;margin:0 0 var(--space-lg)}.problem-browser-result__intro dl div{padding:.75rem;border-radius:var(--radius-sm);background:var(--color-white)}.problem-browser-result dt{color:var(--color-text-muted);font-size:.68rem;font-weight:800;text-transform:uppercase}.problem-browser-result dd{margin:.25rem 0 0;font-weight:800}.problem-browser-result__candidates>strong{display:block;margin-bottom:var(--space-md)}.problem-browser-result__candidates>a{display:flex;justify-content:space-between;gap:var(--space-md);margin-bottom:.5rem;padding:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-charcoal);font-weight:800}.problem-browser-result__candidates em{color:var(--color-text-muted);font-size:.68rem;font-style:normal;text-transform:capitalize}

.algorithm-relationship-graph{position:relative;display:grid;min-height:520px;place-items:center;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:radial-gradient(circle at center,rgba(242,181,31,.12),transparent 45%),var(--color-ash-soft)}.relationship-graph__centre{position:relative;z-index:3;display:grid;width:180px;min-height:150px;place-items:center;padding:var(--space-lg);border-radius:42px;background:var(--color-charcoal);color:var(--color-white);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2)}.relationship-graph__centre>span{color:var(--color-yellow);font-size:.65rem;text-transform:uppercase}.relationship-graph__centre strong{font-size:1.15rem}.relationship-graph__centre a{color:var(--color-yellow);font-size:.7rem;font-weight:800}.relationship-graph__nodes{position:absolute;inset:0}.relationship-graph__nodes>*{position:absolute;display:grid;width:145px;min-height:76px;place-items:center;padding:.65rem;border:1px solid rgba(242,181,31,.35);border-radius:var(--radius-md);background:var(--color-white);color:var(--color-charcoal);text-align:center;box-shadow:var(--shadow-sm)}.relationship-graph__nodes>*:nth-child(1){top:7%;left:50%;transform:translateX(-50%)}.relationship-graph__nodes>*:nth-child(2){top:24%;right:7%}.relationship-graph__nodes>*:nth-child(3){right:12%;bottom:10%}.relationship-graph__nodes>*:nth-child(4){bottom:10%;left:12%}.relationship-graph__nodes>*:nth-child(5){top:24%;left:7%}.relationship-graph__nodes span{color:var(--color-text-muted);font-size:.6rem;text-transform:uppercase}.relationship-graph__nodes strong{font-size:.75rem}.relationship-graph__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}.graph-accessibility-note{margin:var(--space-md) 0 0;color:var(--color-text-muted);font-size:.72rem}

.algorithm-catalogue-layout{display:grid;grid-template-columns:250px 1fr;align-items:start;gap:var(--space-xl)}.algorithm-filter-panel{position:sticky;top:100px;display:grid;gap:var(--space-md);padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-ash-soft)}.algorithm-filter-panel__header{display:flex;justify-content:space-between;gap:var(--space-md)}.algorithm-filter-panel__header button{border:0;background:transparent;color:var(--color-maroon);font-size:.72rem;font-weight:800}.algorithm-filter-panel label{display:grid;gap:.35rem;color:var(--color-charcoal);font-size:.7rem;font-weight:800}.algorithm-filter-panel select{width:100%;min-height:42px;padding:.55rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-charcoal)}.algorithm-catalogue-results__header{display:flex;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md);color:var(--color-text-muted);font-size:.72rem}.algorithm-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.algorithm-library-card{display:flex;min-height:100%;flex-direction:column;padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);box-shadow:var(--shadow-sm);transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.algorithm-library-card:hover,.algorithm-library-card.is-highlighted{border-color:var(--color-yellow);transform:translateY(-4px);box-shadow:var(--shadow-md)}.algorithm-library-card__top{display:flex;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}.algorithm-library-card__top span{color:#795900;font-size:.65rem;font-weight:900;text-transform:uppercase}.algorithm-library-card__top em{color:var(--color-text-muted);font-size:.65rem;font-style:normal;text-transform:capitalize}.algorithm-library-card h3{margin-bottom:.5rem;font-size:1.2rem}.algorithm-library-card>p{color:var(--color-text-muted);font-size:.82rem;line-height:1.55}.algorithm-library-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--space-md) 0}.algorithm-library-card__meta span{padding:.25rem .45rem;border-radius:var(--radius-pill);background:var(--color-ash-soft);color:var(--color-text-muted);font-size:.62rem}.algorithm-library-card__best{margin-bottom:var(--space-md);padding:.7rem;border-left:3px solid var(--color-yellow);background:rgba(242,181,31,.07)}.algorithm-library-card__best strong{font-size:.66rem;text-transform:uppercase}.algorithm-library-card__best p{margin:.25rem 0 0;color:var(--color-text-muted);font-size:.72rem;line-height:1.5}.algorithm-library-card__availability{align-self:flex-start;margin-top:auto;padding:.3rem .5rem;border-radius:var(--radius-pill);background:var(--color-ash-soft);color:var(--color-text-muted);font-size:.62rem;font-weight:800}.algorithm-library-card__availability.is-available{background:rgba(242,181,31,.16);color:#6f5000}.algorithm-library-card__actions{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:var(--space-md)}.algorithm-library-card__actions a{color:var(--color-charcoal);font-size:.75rem;font-weight:850}.algorithm-library-card__actions a:hover{color:var(--color-maroon)}.algorithm-library-card__actions button{padding:.45rem .65rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-charcoal);font-size:.68rem;font-weight:800}.algorithm-library-card__actions button[aria-pressed="true"]{border-color:var(--color-yellow);background:rgba(242,181,31,.12)}.algorithm-library-card--compact{padding:var(--space-md)}.algorithm-library-card--compact .algorithm-library-card__meta{display:none}.library-no-results{padding:var(--space-2xl);text-align:center;color:var(--color-text-muted)}

.library-type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg)}.library-type-grid article{padding:var(--space-xl);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);background:rgba(255,255,255,.04)}.library-type-grid span{display:inline-block;margin-bottom:var(--space-md);color:var(--color-yellow);font-size:.68rem;font-weight:900;text-transform:uppercase}.library-type-grid h3{margin-bottom:.5rem;color:var(--color-white)}.library-type-grid p{margin:0;color:#bdbdbd;line-height:1.65}.library-learning-notice{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:var(--space-xl);padding:clamp(1.5rem,4vw,2.5rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-ash-soft)}.library-learning-notice>span{display:grid;width:60px;height:60px;place-items:center;border-radius:18px;background:var(--color-yellow);font-size:1.8rem;font-weight:950}.library-learning-notice h2{margin:.4rem 0 .5rem}.library-learning-notice p{margin:0;color:var(--color-text-muted);line-height:1.7}

.library-compare-bar{position:fixed;right:20px;bottom:20px;left:20px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);max-width:1180px;margin:auto;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);background:rgba(31,31,31,.96);color:var(--color-white);box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.library-compare-bar>div{display:flex;align-items:center;gap:.7rem}.library-compare-bar>div:first-child>div{display:flex;flex-wrap:wrap;gap:.35rem}.library-compare-bar span{padding:.25rem .45rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);font-size:.65rem}.library-compare-bar button:not(.button){border:0;background:transparent;color:#bbb;font-weight:800}.library-compare-dialog{width:min(1200px,calc(100% - 32px));max-height:90vh;padding:0;overflow:auto;border:0;border-radius:var(--radius-lg);background:var(--color-white);box-shadow:0 28px 90px rgba(0,0,0,.4)}.library-compare-dialog::backdrop{background:rgba(0,0,0,.72)}.library-compare-dialog__header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-xl);border-bottom:1px solid var(--color-border);background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.library-compare-dialog__header h2{margin-top:.35rem}.library-compare-dialog__header>button{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:50%;background:var(--color-ash-soft);font-size:1.4rem}.library-compare-dialog__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);padding:var(--space-xl)}.library-compare-dialog__grid article{padding:var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-ash-soft)}.library-compare-dialog__grid article>span{color:#795900;font-size:.65rem;font-weight:900;text-transform:uppercase}.library-compare-dialog__grid h3{margin:.4rem 0 var(--space-lg)}.library-compare-dialog__grid dl{display:grid;gap:.45rem}.library-compare-dialog__grid dl div{display:flex;justify-content:space-between;gap:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--color-border)}.library-compare-dialog__grid dt,.library-compare-dialog__grid dd{font-size:.68rem}.library-compare-dialog__grid dd{margin:0;font-weight:800;text-transform:capitalize}.library-compare-dialog__grid p{color:var(--color-text-muted);font-size:.72rem;line-height:1.5}.library-compare-dialog__grid a{color:var(--color-maroon);font-size:.75rem;font-weight:850}


/* =========================================================
   ALGORITHM DETAIL PAGES
   ========================================================= */

/* =========================================================
   COMPLETE ALGORITHM TAXONOMY LIBRARY
   ========================================================= */

/* =========================================================
   Ai DICTIONARY
   ========================================================= */

.dictionary-hero{background:radial-gradient(circle at 78% 25%,rgba(247,179,31,.17),transparent 27%),linear-gradient(145deg,#171717,#2b261d);color:#fff}.dictionary-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.55fr);gap:clamp(2rem,8vw,7rem);align-items:center}.dictionary-hero .page-hero__title{color:#fff}.dictionary-hero .page-hero__description{max-width:760px;color:rgba(255,255,255,.76)}.dictionary-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}.dictionary-hero__orbit{position:relative;display:grid;width:min(390px,90vw);aspect-ratio:1;place-items:center;margin:auto;border:1px solid rgba(247,179,31,.35);border-radius:50%}.dictionary-hero__orbit::before,.dictionary-hero__orbit::after{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%;content:""}.dictionary-hero__orbit::before{inset:15%}.dictionary-hero__orbit::after{inset:31%}.dictionary-hero__orbit>strong{z-index:1;display:grid;width:120px;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--color-primary);color:#181818;text-align:center}.dictionary-orbit-node{position:absolute;padding:.45rem .65rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#292929;color:#fff;font-size:.62rem;font-weight:800}.dictionary-orbit-node--1{top:3%;left:39%}.dictionary-orbit-node--2{top:25%;right:-4%}.dictionary-orbit-node--3{right:3%;bottom:20%}.dictionary-orbit-node--4{bottom:3%;left:37%}.dictionary-orbit-node--5{bottom:23%;left:-7%}.dictionary-orbit-node--6{top:24%;left:-2%}.dictionary-principle{padding-block:1.2rem;border-bottom:1px solid var(--color-border);background:#fff}.dictionary-principle .container{display:flex;align-items:center;justify-content:center;gap:1.3rem}.dictionary-principle .container>div{display:grid;text-align:center}.dictionary-principle strong{font-size:.82rem}.dictionary-principle span{color:var(--color-text-muted);font-size:.62rem}.dictionary-principle b{color:var(--color-primary);font-size:1.5rem}.dictionary-search{max-width:920px;margin:0 auto 1.3rem;text-align:center}.dictionary-search>label{display:block;margin-bottom:.55rem;font-size:clamp(1.15rem,2vw,1.55rem);font-weight:900}.dictionary-search>div{display:flex;align-items:center;gap:.7rem;padding:.45rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm)}.dictionary-search input{min-width:0;flex:1;padding:.65rem 0;border:0;outline:0}.dictionary-search kbd{padding:.2rem .4rem;border:1px solid var(--color-border);border-radius:5px;background:var(--color-ash-soft);font-size:.62rem}.dictionary-search>p{margin:.5rem 0;color:var(--color-text-muted);font-size:.68rem}.dictionary-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;margin-bottom:1.3rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-border)}.dictionary-stats div{display:grid;gap:.15rem;padding:.9rem;background:#fff;text-align:center}.dictionary-stats strong{color:var(--color-maroon);font-size:1.45rem}.dictionary-stats span{color:var(--color-text-muted);font-size:.58rem;font-weight:800;text-transform:uppercase}.dictionary-filter-link{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.3rem;padding:1rem 1.2rem;border-radius:var(--radius-md);background:#fff1c8}.dictionary-filter-link h2{margin:.2rem 0;font-size:1.2rem}.dictionary-filter-link p{margin:0;color:var(--color-text-muted);font-size:.72rem}.dictionary-view-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-bottom:1.3rem}.dictionary-view-tabs button{display:grid;gap:.2rem;padding:.9rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;text-align:left}.dictionary-view-tabs button:hover,.dictionary-view-tabs button.is-active{border-color:var(--color-primary);background:#fff8e5}.dictionary-view-tabs strong{font-size:.76rem}.dictionary-view-tabs small{color:var(--color-text-muted);font-size:.58rem}.dictionary-loading{padding:2rem;text-align:center}.dictionary-view-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-block:1.5rem}.dictionary-view-heading h2{margin:.25rem 0}.dictionary-view-heading p{max-width:720px;margin:0;color:var(--color-text-muted)}.dictionary-view-heading>div:last-child{display:flex;gap:.5rem}.dictionary-view-heading button{padding:.65rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;font-size:.65rem;font-weight:800}.dictionary-topic-jump,.dictionary-alphabet{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}.dictionary-topic-jump button,.dictionary-alphabet button{padding:.55rem .7rem;border:1px solid var(--color-border);border-radius:999px;background:#fff;font-size:.62rem;font-weight:800}.dictionary-topic-jump button:hover,.dictionary-alphabet button:hover,.dictionary-alphabet button.is-selected{border-color:var(--color-primary);background:#fff8e5}.dictionary-tree-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);gap:1.2rem;align-items:start}.dictionary-tree,.dictionary-entry-preview{padding:1.15rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}.dictionary-tree-root{display:grid;margin-bottom:.8rem;padding:1rem;border-radius:var(--radius-md);background:var(--color-dark);color:#fff}.dictionary-tree-root span{color:rgba(255,255,255,.62);font-size:.65rem}.dictionary-tree ul{margin:0;padding:0;list-style:none}.dictionary-tree ul ul{margin-left:1.1rem;padding-left:.9rem;border-left:1px solid #d9d5cc}.dictionary-tree-node__row{display:flex;align-items:center;gap:.35rem;margin:.22rem 0;padding:.25rem;border-radius:8px}.dictionary-tree-node__row:hover,.dictionary-tree-node__row.is-selected{background:#fff7df}.dictionary-tree-node__row>button:first-child,.dictionary-tree-node__row>i{display:grid;width:26px;height:26px;flex:0 0 26px;place-items:center}.dictionary-tree-node__row>button:first-child{border:1px solid var(--color-border);border-radius:7px;background:#fff;color:var(--color-maroon);font-weight:900}.dictionary-tree-node__row>i::after{display:block;width:7px;height:7px;margin:9px;border-radius:50%;background:#a98a3d;content:""}.dictionary-tree-node__row>button:nth-child(2){display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-width:0;flex:1;padding:.4rem .5rem;border:0;background:transparent;text-align:left}.dictionary-tree-node__row>button:nth-child(2) span{overflow-wrap:anywhere;font-size:.76rem;font-weight:820}.dictionary-tree-node__row small{color:var(--color-text-muted);font-size:.55rem;font-weight:750;text-transform:uppercase}.dictionary-tree-node__row em{display:grid;min-width:24px;height:21px;place-items:center;border-radius:999px;background:var(--color-ash-soft);font-size:.55rem;font-style:normal}.dictionary-entry-preview{position:sticky;top:96px;min-height:400px}.dictionary-entry-preview__empty{display:grid;min-height:350px;place-content:center;text-align:center}.dictionary-entry-preview__empty>span{color:var(--color-primary);font-size:2.2rem;font-weight:950}.dictionary-entry-preview__empty h2{margin:.5rem}.dictionary-entry-preview__empty p{color:var(--color-text-muted)}.dictionary-entry-preview__top{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.dictionary-entry-preview__top em{color:var(--color-text-muted);font-size:.6rem;font-style:normal}.dictionary-entry-preview h2{margin:.75rem 0;font-size:clamp(1.7rem,3vw,2.4rem)}.dictionary-type-badge{display:inline-flex;padding:.3rem .5rem;border-radius:999px;background:#eee;color:#444;font-size:.56rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.dictionary-type-badge[data-entry-type="Algorithm"]{background:#ffe6a3;color:#704b00}.dictionary-type-badge[data-entry-type="Architecture"],.dictionary-type-badge[data-entry-type="Model"]{background:#e5e0ff;color:#4b398b}.dictionary-type-badge[data-entry-type="Tool"],.dictionary-type-badge[data-entry-type="Framework"]{background:#dff3ff;color:#145d84}.dictionary-type-badge[data-entry-type="Metric"]{background:#e3f5e8;color:#23633a}.dictionary-type-badge[data-entry-type="Hardware"]{background:#e7e7e7;color:#333}.dictionary-type-badge[data-entry-type="Risk"]{background:#ffe1dc;color:#8d3025}.dictionary-type-badge[data-entry-type="Career"]{background:#f3e5ff;color:#683687}.dictionary-entry-definition{color:var(--color-text-muted);font-size:.84rem;line-height:1.75}.dictionary-entry-paths,.dictionary-entry-related,.dictionary-entry-resource-plan{margin:1rem 0;padding-top:1rem;border-top:1px solid var(--color-border)}.dictionary-entry-paths>strong,.dictionary-entry-related>strong,.dictionary-entry-resource-plan>strong{font-size:.72rem}.dictionary-entry-paths p{margin:.35rem 0;color:var(--color-text-muted);font-size:.62rem}.dictionary-entry-related>div{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}.dictionary-entry-related button{padding:.4rem .55rem;border:1px solid var(--color-border);border-radius:999px;background:#fff;font-size:.6rem;font-weight:750}.dictionary-entry-resource-plan p{color:var(--color-text-muted);font-size:.65rem;line-height:1.6}.dictionary-graph{display:grid;grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);gap:2rem;align-items:center;min-height:540px;padding:2rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:radial-gradient(circle at 18% 50%,rgba(247,179,31,.13),transparent 30%),#fff}.dictionary-graph__centre{display:grid;gap:.5rem;padding:1.5rem;border-radius:50%;aspect-ratio:1;place-content:center;background:var(--color-dark);color:#fff;text-align:center}.dictionary-graph__centre span{color:var(--color-primary);font-size:.6rem;font-weight:900;text-transform:uppercase}.dictionary-graph__centre button{border:0;background:transparent;color:var(--color-primary);font-size:.62rem;font-weight:800}.dictionary-graph__connections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.dictionary-graph__connections button{display:grid;gap:.25rem;padding:1rem;border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);background:#fff;text-align:left}.dictionary-graph__connections span,.dictionary-graph__connections small{color:var(--color-text-muted);font-size:.56rem}.dictionary-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.dictionary-card{display:flex;min-width:0;flex-direction:column;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff}.dictionary-card>div{display:flex;align-items:center;justify-content:space-between}.dictionary-card>div em{color:var(--color-text-muted);font-size:.56rem;font-style:normal}.dictionary-card h3{margin:.7rem 0 .4rem;font-size:1.05rem}.dictionary-card p{flex:1;color:var(--color-text-muted);font-size:.68rem;line-height:1.65}.dictionary-card>button,.dictionary-topic-grid article>button{align-self:flex-start;padding:0;border:0;background:transparent;color:var(--color-maroon);font-size:.68rem;font-weight:850}.dictionary-no-results{grid-column:1/-1;padding:2rem;text-align:center}.dictionary-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.dictionary-topic-grid article{padding:1.2rem;border:1px solid var(--color-border);border-top:3px solid var(--color-primary);border-radius:var(--radius-md);background:#fff}.dictionary-topic-grid article>span{color:#795900;font-size:.6rem;font-weight:850;text-transform:uppercase}.dictionary-topic-grid h3{margin:.5rem 0}.dictionary-topic-grid p{color:var(--color-text-muted);font-size:.72rem}.dictionary-type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-bottom:1.2rem}.dictionary-type-grid button{display:grid;gap:.2rem;padding:.8rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;text-align:left}.dictionary-type-grid button:hover,.dictionary-type-grid button.is-selected{border-color:var(--color-primary);background:#fff8e5}.dictionary-type-grid span{color:var(--color-maroon);font-size:1.1rem;font-weight:900}.dictionary-type-grid strong{font-size:.68rem}.dictionary-type-grid small{color:var(--color-text-muted);font-size:.52rem}.dictionary-boundary{display:flex;align-items:center;gap:1.2rem;max-width:900px}.dictionary-boundary>span{display:grid;width:58px;height:58px;flex:0 0 58px;place-items:center;border-radius:18px;background:var(--color-primary);color:#181818;font-size:1.5rem;font-weight:950}.dictionary-boundary h2{margin:.3rem 0}.dictionary-boundary p{margin:0;color:rgba(255,255,255,.7)}

.taxonomy-hero{background:radial-gradient(circle at 82% 20%,rgba(247,179,31,.15),transparent 28%),linear-gradient(135deg,#181818,#29251d);color:#fff}.taxonomy-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.55fr);gap:clamp(2rem,7vw,6rem);align-items:center}.taxonomy-hero .page-hero__title{color:#fff}.taxonomy-hero .page-hero__description{max-width:760px;color:rgba(255,255,255,.74)}.taxonomy-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}.taxonomy-hero__map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:1.25rem;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);background:rgba(255,255,255,.05)}.taxonomy-hero__map strong{grid-column:1/-1;padding:.8rem;border-radius:var(--radius-sm);background:var(--color-primary);color:#171717;text-align:center}.taxonomy-hero__map span{padding:.65rem;border-left:2px solid rgba(247,179,31,.55);background:rgba(255,255,255,.045);color:rgba(255,255,255,.78);font-size:.72rem;font-weight:750}.taxonomy-overview{padding-block:1.3rem}.taxonomy-overview__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-border)}.taxonomy-overview__grid div{display:grid;gap:.2rem;padding:1rem;background:var(--color-white);text-align:center}.taxonomy-overview__grid strong{color:var(--color-maroon);font-size:1.55rem}.taxonomy-overview__grid span{color:var(--color-text-muted);font-size:.68rem;font-weight:750;text-transform:uppercase}.taxonomy-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-xl)}.taxonomy-heading>div:first-child{max-width:760px}.taxonomy-legend{display:flex;flex-wrap:wrap;gap:.8rem}.taxonomy-legend span{display:flex;align-items:center;gap:.35rem;color:var(--color-text-muted);font-size:.68rem;font-weight:750}.taxonomy-legend i{width:9px;height:9px;border-radius:50%;background:#888}.taxonomy-legend .is-category{background:var(--color-maroon)}.taxonomy-legend .is-topic{background:#947428}.taxonomy-legend .is-ready{background:#2e8b57}.taxonomy-tools{margin-top:var(--space-xl);padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-ash-soft)}.taxonomy-tools>label{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:850}.taxonomy-search-row{display:flex;gap:.55rem}.taxonomy-search-row input{min-width:0;flex:1;padding:.78rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff}.taxonomy-search-row button,.taxonomy-jump button{padding:.7rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;color:var(--color-text);font-size:.68rem;font-weight:800}.taxonomy-search-row button:hover,.taxonomy-jump button:hover{border-color:var(--color-primary);background:#fff9e9}.taxonomy-tools>p{margin:.55rem 0 0;color:var(--color-text-muted);font-size:.68rem}.taxonomy-jump{display:flex;flex-wrap:wrap;gap:.45rem;margin-block:1rem}.taxonomy-jump button{border-radius:999px}.taxonomy-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.42fr);gap:1.2rem;align-items:start}.taxonomy-tree-panel,.taxonomy-preview{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}.taxonomy-tree-panel{min-width:0;padding:1.15rem}.taxonomy-root{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:1rem;border-radius:var(--radius-md);background:var(--color-dark);color:#fff}.taxonomy-root__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--color-primary);color:#1b1b1b;font-size:.82rem;font-weight:950}.taxonomy-root div{display:grid}.taxonomy-root strong{font-size:1.1rem}.taxonomy-root small{color:rgba(255,255,255,.62)}.taxonomy-tree-list,.taxonomy-tree-list ul{margin:0;padding:0;list-style:none}.taxonomy-tree-list ul{position:relative;margin-left:1.15rem;padding-left:1rem;border-left:1px solid #d8d4ca}.taxonomy-node__row{display:flex;align-items:center;gap:.42rem;min-width:0;margin:.25rem 0;padding:.28rem .35rem;border-radius:9px}.taxonomy-node__row:hover,.taxonomy-node__row.is-selected{background:#fff7df}.taxonomy-node__toggle,.taxonomy-node__endpoint{width:27px;height:27px;flex:0 0 27px}.taxonomy-node__toggle{display:grid;place-items:center;border:1px solid var(--color-border);border-radius:7px;background:#fff;color:var(--color-maroon);font-size:1rem;font-weight:900}.taxonomy-node__toggle:hover{border-color:var(--color-primary)}.taxonomy-node__endpoint{position:relative}.taxonomy-node__endpoint::after{position:absolute;top:11px;left:10px;width:7px;height:7px;border-radius:50%;background:#a98a3d;content:""}.taxonomy-node__name{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-width:0;flex:1;padding:.45rem .55rem;border:0;background:transparent;color:var(--color-text);text-align:left}.taxonomy-node__name span{overflow-wrap:anywhere;font-size:.79rem;font-weight:820}.taxonomy-node__name small{flex:0 0 auto;color:var(--color-text-muted);font-size:.56rem;font-weight:700;text-transform:uppercase}.taxonomy-node__row>em{display:grid;min-width:25px;height:22px;place-items:center;border-radius:999px;background:var(--color-ash-soft);color:var(--color-text-muted);font-size:.58rem;font-style:normal;font-weight:850}.taxonomy-node__ready{padding:.2rem .4rem;border-radius:999px;background:#e4f5e9;color:#1c7143;font-size:.55rem;font-weight:900;text-transform:uppercase}.taxonomy-preview{position:sticky;top:96px;min-height:390px;padding:1.35rem}.taxonomy-preview__placeholder{display:grid;min-height:330px;place-content:center;text-align:center}.taxonomy-preview__placeholder>span{color:var(--color-primary);font-size:2.6rem}.taxonomy-preview__placeholder h2{margin:.5rem 0;font-size:1.35rem}.taxonomy-preview__placeholder p{color:var(--color-text-muted)}.taxonomy-preview__top{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.taxonomy-preview__top>span{color:#795900;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.taxonomy-preview__top em{padding:.3rem .48rem;border-radius:999px;background:var(--color-ash-soft);color:var(--color-text-muted);font-size:.55rem;font-style:normal;font-weight:800}.taxonomy-preview__top em.is-ready{background:#e4f5e9;color:#1c7143}.taxonomy-preview h2{margin:.7rem 0;font-size:clamp(1.6rem,3vw,2.25rem)}.taxonomy-preview>p{color:var(--color-text-muted);line-height:1.7}.taxonomy-preview__path{display:flex;flex-wrap:wrap;gap:.28rem;margin-bottom:1rem}.taxonomy-preview__path span,.taxonomy-preview__path i{color:var(--color-text-muted);font-size:.6rem;font-style:normal}.taxonomy-preview__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1.2rem 0}.taxonomy-preview__facts div{display:grid;padding:.8rem;border-radius:var(--radius-sm);background:var(--color-ash-soft)}.taxonomy-preview__facts strong{font-size:1.3rem}.taxonomy-preview__facts span{color:var(--color-text-muted);font-size:.62rem}.taxonomy-preview__learning{margin:1.15rem 0;padding:1rem;border-left:3px solid var(--color-primary);background:#fff9e9}.taxonomy-preview__learning strong{font-size:.76rem}.taxonomy-preview__learning p{margin:.45rem 0 0;color:var(--color-text-muted);font-size:.7rem;line-height:1.6}.button--disabled{cursor:not-allowed;opacity:.55}.taxonomy-empty{padding:2rem;text-align:center}.taxonomy-type-guide,.taxonomy-next-stage{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl)}.taxonomy-type-guide>div:first-child{max-width:570px}.taxonomy-type-guide__items{display:flex;max-width:540px;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.taxonomy-type-guide__items span{padding:.55rem .7rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:rgba(255,255,255,.78);font-size:.65rem;font-weight:750}.taxonomy-next-stage>div{max-width:720px}.taxonomy-next-stage h2{margin:.4rem 0}

[data-mobile-filter]{display:none}.algorithm-detail-hero{padding-block:clamp(3.5rem,8vw,7rem);background:radial-gradient(circle at 88% 18%,rgba(247,179,31,.14),transparent 25%),var(--color-dark,#1f1f1f);color:#fff}.algorithm-detail-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.36fr);gap:clamp(2rem,6vw,5rem);align-items:end}.algorithm-detail-hero h1{max-width:850px;margin:.35rem 0 1rem;color:#fff;font-size:clamp(2.7rem,7vw,5.8rem);line-height:.98}.algorithm-detail-taxonomy{margin-bottom:1.6rem;color:rgba(255,255,255,.68);font-size:.88rem}.algorithm-detail-taxonomy span{margin-inline:.35rem;color:var(--color-primary,#f7b31f)}.algorithm-detail-lead{max-width:720px;color:rgba(255,255,255,.78);font-size:clamp(1.08rem,2vw,1.3rem)}.algorithm-detail-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.2rem}.algorithm-detail-chips span{padding:.45rem .72rem;border:1px solid rgba(247,179,31,.28);border-radius:999px;background:rgba(247,179,31,.09);color:inherit;font-size:.82rem;font-weight:700}.algorithm-detail-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.algorithm-detail-status{padding:1.35rem;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg,20px);background:rgba(255,255,255,.055)}.algorithm-detail-status>span{display:inline-block;margin-bottom:1rem;color:var(--color-primary,#f7b31f);font-weight:800}.algorithm-detail-status dl,.algorithm-detail-status dd{margin:0}.algorithm-detail-status dl>div{display:flex;justify-content:space-between;gap:1rem;padding-block:.72rem;border-top:1px solid rgba(255,255,255,.1)}.algorithm-detail-status dt{color:rgba(255,255,255,.62)}.algorithm-detail-status dd{text-align:right;font-weight:700}.algorithm-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.32fr);gap:clamp(2rem,6vw,5rem)}.algorithm-detail-content>section{padding-block:2rem;border-bottom:1px solid var(--color-border,#dedbd4)}.algorithm-detail-content>section:first-child{padding-top:0}.algorithm-detail-content h2{margin-bottom:.85rem;font-size:clamp(1.65rem,3vw,2.35rem)}.algorithm-detail-content h3{font-size:1.05rem}.algorithm-detail-do-dont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.2rem}.algorithm-detail-do-dont>div,.algorithm-detail-project,.algorithm-detail-formula{padding:1.25rem;border:1px solid var(--color-border,#dedbd4);border-radius:var(--radius-md,14px);background:var(--color-surface,#fff)}.algorithm-detail-do-dont>div:first-child{border-top:3px solid #2e8b57}.algorithm-detail-do-dont>div:last-child{border-top:3px solid #c56a28}.algorithm-detail-formula{display:grid;gap:.7rem;margin-top:1.25rem;border-color:rgba(247,179,31,.45);background:rgba(247,179,31,.07)}.algorithm-detail-formula span,.algorithm-detail-project>span{color:#8a5a00;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.algorithm-detail-formula code{overflow-wrap:anywhere;font-size:1rem}.algorithm-detail-list{display:grid;gap:.6rem;padding-left:1.2rem}.algorithm-detail-project{margin-top:1.3rem;border-left:4px solid var(--color-primary,#f7b31f)}.algorithm-detail-project p{margin:.45rem 0 0}.algorithm-detail-sidebar{display:grid;align-content:start;gap:1.2rem}.algorithm-detail-sidebar>div{padding:1.25rem;border:1px solid var(--color-border,#dedbd4);border-radius:var(--radius-lg,20px);background:var(--color-surface,#fff)}.algorithm-detail-sidebar h2{margin-bottom:.8rem;font-size:1.15rem}.algorithm-resource-link,.algorithm-related-link{display:flex;justify-content:space-between;gap:1rem;padding-block:.8rem;border-top:1px solid var(--color-border,#dedbd4);color:var(--color-text,#242424);font-weight:800;text-decoration:none}.algorithm-resource-link span,.algorithm-related-link span{color:var(--color-text-muted,#696969);font-size:.78rem;font-weight:600}.algorithm-resource-link.is-planned{cursor:not-allowed;opacity:.62;pointer-events:none}.algorithm-related-link{align-items:flex-end;flex-direction:column;text-align:right}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
