/* CSS Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #205493;
    --primary-dark: #0052CC;
    --secondary-color: #1E3A5F;
    --dark-blue: #0F2137;
    --text-color: #333333;
    --text-light: #666666;
    --text-muted: #888888;
    --bg-light: #F8FAFC;
    --bg-gray: #F1F5F9;
    --white: #FFFFFF;
    --border-color: #E2E8F0;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    /* Motion — one easing curve sitewide for cohesive, smooth reveals and UI */
    --ease-motion: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-ui: 0.34s;
    --duration-reveal: 1.12s;
    --duration-reveal-md: 1.06s;
    --duration-reveal-short: 0.95s;
    --duration-step: 0.84s;
    --duration-bar: 1.58s;
}

html {
    scroll-behavior: smooth;
}

/* Section snap targets — align below sticky nav when scrolling to #anchors or scrollIntoView */
#hero,
#stats,
#skills-score,
#employers,
#certification,
#cta,
#site-footer {
    scroll-margin-top: 80px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--duration-ui) var(--ease-motion);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark-blue);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.125rem;
}

.text-primary {
    color: var(--primary-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--duration-ui) var(--ease-motion),
        color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion),
        box-shadow var(--duration-ui) var(--ease-motion),
        transform var(--duration-ui) var(--ease-motion);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-outline-light {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn-outline-light:hover {
    background-color: var(--white);
    color: var(--dark-blue);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-outline-dark:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}

/* Navigation */
.navbar {
    --nav-navy: #205493;
    --nav-charcoal: #205493;
    --nav-pale-blue: #eef4fc;
    --nav-pale-blue-border: #c8d7ea;

    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    border-bottom: 1px solid #00000008;
    padding: 14px 0;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    min-width: 0;
}

.navbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.navbar-logo-img {
    display: block;
    height: 48px;
    width: auto;
    max-width: min(220px, 42vw);
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 36px);
}

.nav-links > li {
    flex-shrink: 0;
}

.nav-links a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nav-charcoal);
    letter-spacing: -0.01em;
}

.nav-links a:hover {
    color: var(--nav-navy);
}

.nav-item-has-dropdown {
    position: relative;
}

.nav-link-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.nav-link-dropdown-trigger {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nav-charcoal);
    letter-spacing: -0.01em;
    text-align: left;
}

.nav-link-dropdown-trigger:hover,
.nav-item-has-dropdown:hover .nav-link-dropdown-trigger {
    color: var(--nav-navy);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    min-width: 280px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid var(--nav-pale-blue-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -6px, 0);
    transition:
        opacity var(--duration-ui) var(--ease-motion),
        visibility var(--duration-ui) var(--ease-motion),
        transform var(--duration-ui) var(--ease-motion);
    pointer-events: none;
}

/* Invisible hit area so the pointer can move from the label to the menu without closing */
.nav-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-item-has-dropdown:hover .nav-dropdown,
.nav-item-has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.nav-links .nav-dropdown__link {
    display: block;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nav-charcoal);
    text-decoration: none;
}

.nav-links .nav-dropdown__link:hover {
    background-color: var(--nav-pale-blue);
    color: var(--nav-navy);
}

.nav-links .nav-dropdown__link--hta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    line-height: 1.3;
}

.nav-dropdown__logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.nav-dropdown__hta-url {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

.nav-links .nav-dropdown__link--hta:hover .nav-dropdown__hta-url {
    color: var(--nav-navy);
}

.nav-chevron {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.85;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion),
        color var(--duration-ui) var(--ease-motion);
    white-space: nowrap;
}

.nav-btn-create {
    background-color: var(--nav-pale-blue);
    color: var(--nav-navy);
    border: 1px solid var(--nav-pale-blue-border);
}

.nav-btn-create:hover {
    background-color: #e4edf8;
    border-color: #b8c9df;
}

.nav-btn-post {
    background-color: var(--nav-navy);
    color: #ffffff;
    border: 1px solid var(--nav-navy);
}

.nav-btn-post:hover {
    background-color: #0a1829;
    border-color: #0a1829;
}

/* Footer & inline logo (non-navbar) */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.logo-text {
    font-size: 1.125rem;
    color: var(--dark-blue);
}

.logo-text strong {
    color: var(--primary-color);
}

/* Scroll-triggered section reveals (see animations.js) */
@keyframes sectionRevealIn {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.has-js .section-reveal:not(.is-inview):not(.hero):not(.employers):not(.certification):not(.cta) > .container {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.section-reveal:not(.hero):not(.employers):not(.certification):not(.cta).is-inview > .container {
    animation: sectionRevealIn var(--duration-reveal) var(--ease-motion) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .has-js .section-reveal:not(.is-inview):not(.hero):not(.employers):not(.certification):not(.cta) > .container {
        opacity: 1 !important;
        transform: none !important;
    }

    .section-reveal:not(.hero):not(.employers):not(.certification):not(.cta).is-inview > .container {
        animation: none !important;
    }
}

/* Hero Section */
.hero {
    --hero-navy: #110E7E;
    --hero-teal: #14857e;
    --hero-teal-dark: #0f6b66;
    --hero-badge-blue: #2563eb;
    --hero-label-blue: #3b82f6;

    padding: 64px 0 88px;
    background-color: #ffffff;
}

.hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.has-js #hero:not(.is-inview) .hero-content {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.has-js #hero:not(.is-inview) .hero-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

#hero.is-inview .hero-content {
    animation: skillsReveal var(--duration-reveal) var(--ease-motion) forwards;
}

#hero.is-inview .hero-card {
    animation: skillsReveal var(--duration-reveal) 0.22s var(--ease-motion) forwards;
}

.has-js #hero:not(.is-inview) .hero-job {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

#hero.is-inview .hero-job:nth-child(1) {
    animation: skillsStepIn var(--duration-step) 0.3s var(--ease-motion) forwards;
}

#hero.is-inview .hero-job:nth-child(2) {
    animation: skillsStepIn var(--duration-step) 0.5s var(--ease-motion) forwards;
}

#hero.is-inview .hero-job:nth-child(3) {
    animation: skillsStepIn var(--duration-step) 0.7s var(--ease-motion) forwards;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    margin-bottom: 20px;
    background-color: #e8f1ff;
    color: var(--hero-badge-blue);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
}

.hero-badge__icon {
    display: flex;
    flex-shrink: 0;
}

.hero-title {
    margin-bottom: 20px;
    font-size: clamp(2rem, 4.2vw, 3.125rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--hero-navy);
}

.hero-title-accent {
    color: var(--hero-teal);
}

.hero-description {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4b5563;
    margin-bottom: 32px;
    max-width: 34rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 8px;
    text-decoration: none;
    transition:
        background-color var(--duration-ui) var(--ease-motion),
        color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion);
    cursor: pointer;
}

.hero-cta--primary {
    background-color: var(--hero-teal);
    color: #ffffff;
    border: 2px solid var(--hero-teal);
}

.hero-cta--primary:hover {
    background-color: #107a74;
    border-color: #107a74;
}

.hero-cta--secondary {
    background-color: #f1f5f9;
    color: var(--hero-navy);
    border: 2px solid #e2e8f0;
}

.hero-cta--secondary:hover {
    background-color: #e8edf3;
    border-color: #cbd5e1;
}

/* Hero — matched jobs preview card */
.hero-preview {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 0 1px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    border: 1px solid #eef2f7;
}

.hero-preview__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.hero-preview__bolt {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
}

.hero-preview__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hero-label-blue);
}

.hero-preview__body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-job {
    padding: 14px 14px 12px;
    background: #fafbfc;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
}

.hero-job__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-job__text {
    min-width: 0;
}

.hero-job__title {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--hero-navy);
    line-height: 1.35;
}

.hero-job__company {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

.hero-job__meta {
    margin: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
}

.hero-job__sep {
    margin: 0 5px;
    color: #cbd5e1;
}

.hero-job__salary {
    font-weight: 600;
    color: var(--hero-teal);
}

.hero-job__pill {
    flex-shrink: 0;
    padding: 5px 11px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--hero-teal-dark);
    background: #d5f5f2;
    border-radius: 999px;
    white-space: nowrap;
}

.hero-job__bar {
    height: 5px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.hero-job__bar-fill {
    display: block;
    height: 100%;
    width: var(--bar-width);
    border-radius: inherit;
    background: linear-gradient(90deg, #205493 0%, #3b82f6 100%);
    transition: width var(--duration-bar) var(--ease-motion);
}

.has-js #hero:not(.is-inview) .hero-job__bar-fill {
    width: 0;
}

#hero.is-inview .hero-job__bar-fill {
    width: var(--bar-width);
}

/* Stats Section */
.stats {
    padding: 52px 0 56px;
    background-color: #ffffff;
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: clamp(20px, 3vw, 40px);
    text-align: center;
}

.stat-item {
    flex: 1 1 140px;
    min-width: min(100%, 140px);
    max-width: 220px;
    margin-inline: auto;
}

.stat-item__value {
    margin: 0 0 8px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(1.875rem, 2.6vw, 2.375rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #2b5e94;
}

.stat-item__label {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: #555555;
}

/* Shared section labels (employers, certification, etc.) */
.section-badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: rgba(0, 102, 255, 0.1);
    color: var(--primary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.section-description {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 32px;
    line-height: 1.7;
}

/* Skills Score Section */
.skills-score {
    --ss-navy: #1a237e;
    --ss-teal: #26a69a;
    --ss-orange: #f57c00;

    padding: 88px 0;
    background-color: #eceff1;
}

.skills-score-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
}

.has-js .skills-score:not(.is-inview) .skills-score-content {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.has-js .skills-score:not(.is-inview) .skills-score-card-wrap {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.skills-score.is-inview .skills-score-content {
    animation: skillsReveal var(--duration-reveal) var(--ease-motion) forwards;
}

.skills-score.is-inview .skills-score-card-wrap {
    animation: skillsReveal var(--duration-reveal) 0.22s var(--ease-motion) forwards;
}

.skills-score-eyebrow {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ss-teal);
    letter-spacing: 0.02em;
}

.skills-score-title {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--ss-navy);
}

.skills-score-title__accent {
    color: var(--ss-teal);
}

.skills-score-lead {
    margin: 0 0 28px;
    font-size: 1rem;
    line-height: 1.7;
    color: #5c6370;
    max-width: 36rem;
}

.skills-steps {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.skills-step {
    display: flex;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #d5d9df;
}

.has-js .skills-step:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

.skills-step:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.skills-step.is-revealed {
    animation: skillsStepIn calc(var(--duration-reveal) + 0.03s) 0.45s var(--ease-motion) forwards;
}

.skills-step__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ss-navy);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
}

.skills-step__body {
    min-width: 0;
}

.skills-step__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ss-navy);
}

.skills-step__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #5c6370;
}

.skills-score-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--ss-navy);
    border: 2px solid var(--ss-navy);
    border-radius: 8px;
    text-decoration: none;
    transition:
        transform var(--duration-ui) var(--ease-motion),
        background-color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion),
        box-shadow var(--duration-ui) var(--ease-motion);
}

.skills-score-cta:hover {
    transform: scale(1.02);
    background-color: #141d69;
    border-color: #141d69;
    box-shadow: 0 6px 20px rgba(26, 35, 126, 0.25);
}

.skills-score-cta:active {
    transform: scale(0.99);
}

/* Skills match preview card */
.skills-match-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e4e8ec;
    box-shadow: 0 8px 32px rgba(26, 35, 126, 0.08), 0 0 1px rgba(26, 35, 126, 0.06);
    overflow: hidden;
}

.skills-match-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f4;
}

.skills-match-card__header-icon {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
}

.skills-match-card__header-title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--ss-orange);
}

.skills-match-card__block {
    padding: 18px 18px 20px;
    border-bottom: 1px solid #eef1f4;
}

.skills-match-card__block:last-of-type {
    border-bottom: none;
}

.skills-match-card__label {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ss-navy);
}

.skills-match-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
}

.skill-pill__icon {
    flex-shrink: 0;
}

.skill-pill--ok {
    background: rgba(38, 166, 154, 0.14);
    color: #0d6b63;
    border: 1px solid rgba(38, 166, 154, 0.35);
}

.skill-pill--ok .skill-pill__icon {
    color: #0d9488;
}

.skill-pill--partial {
    background: rgba(245, 124, 0, 0.1);
    color: #c2410c;
    border: 1px solid rgba(245, 124, 0, 0.35);
}

.skill-pill--partial .skill-pill__icon--bolt {
    color: var(--ss-orange);
}

.skill-pill--todo {
    background: #f8fafc;
    color: #475569;
    border: 1px dashed #94a3b8;
    font-weight: 500;
}

.skill-pill__ring {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #94a3b8;
    flex-shrink: 0;
}

.skills-match-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skills-match-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    align-items: center;
    padding: 12px 14px;
    background: #e8eef5;
    border-radius: 10px;
    border: 1px solid #dce3ed;
    transition: box-shadow var(--duration-ui) var(--ease-motion), transform var(--duration-ui) var(--ease-motion);
}

.skills-match-row:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 22px rgba(26, 35, 126, 0.12);
}

.skills-match-row__job {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ss-navy);
    line-height: 1.35;
}

.skills-match-row__bar-wrap {
    grid-column: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #cfd8e6;
}

.skills-match-row__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--ss-navy);
    transition: width var(--duration-bar) var(--ease-motion);
}

.skills-score.is-inview .skills-match-row__bar {
    width: var(--bar-width);
}

.skills-match-row__pct {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ss-orange);
    min-width: 2.75rem;
    text-align: right;
}

.skills-match-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 4px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #7b8494;
}

.skills-match-hint__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

@keyframes skillsReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes skillsStepIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .has-js #hero:not(.is-inview) .hero-content,
    .has-js #hero:not(.is-inview) .hero-card,
    .has-js #hero:not(.is-inview) .hero-job {
        opacity: 1 !important;
        transform: none !important;
    }

    #hero .hero-content,
    #hero .hero-card,
    #hero .hero-job {
        animation: none !important;
    }

    #hero .hero-job__bar-fill {
        transition: none;
        width: var(--bar-width) !important;
    }

    .has-js .skills-score:not(.is-inview) .skills-score-content,
    .has-js .skills-score:not(.is-inview) .skills-score-card-wrap {
        opacity: 1 !important;
        transform: none !important;
    }

    .has-js .skills-step:not(.is-revealed) {
        opacity: 1 !important;
        transform: none !important;
    }

    .skills-score .skills-score-content,
    .skills-score .skills-score-card-wrap {
        animation: none !important;
    }

    .skills-step.is-revealed {
        animation: none !important;
    }

    .skills-score .skills-match-row__bar {
        transition: none;
    }

    .skills-score-cta:hover {
        transform: none;
    }

    .skills-match-row:hover {
        transform: none;
    }
}

/* Employers Section */
.employers {
    --emp-navy: #0f2137;
    --emp-teal: #14857e;
    --emp-blue: #2563eb;
    --emp-gold: #b8860b;

    padding: 88px 0;
    background-color: #ffffff;
}

.employers-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.has-js #employers:not(.is-inview) .employers-dashboard {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
}

.has-js #employers:not(.is-inview) .employers-content {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.has-js #employers:not(.is-inview) .employer-candidate {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
}

.has-js #employers:not(.is-inview) .employers-feature {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

#employers.is-inview .employers-dashboard {
    animation: employerDashReveal var(--duration-reveal-md) var(--ease-motion) forwards;
}

#employers.is-inview .employers-content {
    animation: skillsReveal var(--duration-reveal-md) 0.24s var(--ease-motion) forwards;
}

#employers.is-inview .employer-candidate:nth-child(1) {
    animation: skillsStepIn var(--duration-step) 0.36s var(--ease-motion) forwards;
}

#employers.is-inview .employer-candidate:nth-child(2) {
    animation: skillsStepIn var(--duration-step) 0.56s var(--ease-motion) forwards;
}

#employers.is-inview .employer-candidate:nth-child(3) {
    animation: skillsStepIn var(--duration-step) 0.76s var(--ease-motion) forwards;
}

#employers.is-inview .employers-feature:nth-child(1) {
    animation: skillsStepIn var(--duration-step) 0.38s var(--ease-motion) forwards;
}

#employers.is-inview .employers-feature:nth-child(2) {
    animation: skillsStepIn var(--duration-step) 0.58s var(--ease-motion) forwards;
}

#employers.is-inview .employers-feature:nth-child(3) {
    animation: skillsStepIn var(--duration-step) 0.78s var(--ease-motion) forwards;
}

#employers.is-inview .employers-feature:nth-child(4) {
    animation: skillsStepIn var(--duration-step) 0.98s var(--ease-motion) forwards;
}

@keyframes employerDashReveal {
    from {
        opacity: 0;
        transform: translate3d(-24px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.employers-dashboard {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e8ecf1;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 0 1px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.employers-dash-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #eef2f6;
}

.employers-dash-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--emp-gold);
}

.employers-dash-badge__icon {
    display: flex;
    line-height: 0;
}

.employers-dash-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.employers-candidates {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.employer-candidate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #eef5ff;
    border: 1px solid #dbe7fb;
    border-radius: 10px;
}

.employer-candidate__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9, #14857e);
}

.employer-candidate__avatar--2 {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.employer-candidate__avatar--3 {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.employer-candidate__info {
    flex: 1;
    min-width: 0;
}

.employer-candidate__name {
    margin: 0 0 2px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--emp-blue);
}

.employer-candidate__meta {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

.employer-candidate__aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}

.employer-candidate__cert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0d9488;
    background: #d1fae5;
    border-radius: 6px;
}

.employer-candidate__pct {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--emp-blue);
    line-height: 1;
}

.employers-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px 18px 22px;
    border-top: 1px solid #eef2f6;
    background: #fafbfc;
}

.employers-metric {
    text-align: center;
}

.employers-metric__value {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--emp-blue);
    line-height: 1.2;
}

.employers-metric__label {
    margin: 0;
    font-size: 0.6875rem;
    color: #64748b;
    line-height: 1.35;
}

.employers-content {
    min-width: 0;
}

.employers-eyebrow {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--emp-blue);
}

.employers-title {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--emp-navy);
}

.employers-title__accent {
    color: var(--emp-teal);
}

.employers-lead {
    margin: 0 0 26px;
    font-size: 1rem;
    line-height: 1.7;
    color: #5c6370;
    max-width: 36rem;
}

.employers-brand {
    color: var(--emp-blue);
    font-weight: 700;
}

.employers-features {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.employers-feature {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.employers-feature:last-child {
    margin-bottom: 0;
}

.employers-feature__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f1ff;
    border-radius: 10px;
}

.employers-feature__text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--emp-navy);
    margin-bottom: 4px;
}

.employers-feature__text p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748b;
}

.employers-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.employers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition:
        transform var(--duration-ui) var(--ease-motion),
        background-color var(--duration-ui) var(--ease-motion),
        box-shadow var(--duration-ui) var(--ease-motion);
}

.employers-btn--primary {
    background: var(--emp-navy);
    color: #ffffff;
    border: 2px solid var(--emp-navy);
}

.employers-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 33, 55, 0.2);
}

.employers-btn--secondary {
    background: #f1f5f9;
    color: var(--emp-navy);
    border: 2px solid #e2e8f0;
}

.employers-btn--secondary:hover {
    background: #e8edf3;
}

@media (prefers-reduced-motion: reduce) {
    .has-js #employers:not(.is-inview) .employers-dashboard,
    .has-js #employers:not(.is-inview) .employers-content,
    .has-js #employers:not(.is-inview) .employer-candidate,
    .has-js #employers:not(.is-inview) .employers-feature {
        opacity: 1 !important;
        transform: none !important;
    }

    #employers .employers-dashboard,
    #employers .employers-content,
    #employers .employer-candidate,
    #employers .employers-feature {
        animation: none !important;
    }
}

/* Certification Section */
.certification {
    --cert-navy: #0a1172;
    --cert-teal: #26a69a;
    --cert-text: #6b7280;
    --cert-card-blue: #4b6584;

    padding: 88px 0;
    background-color: #f8f9fb;
    color: var(--cert-navy);
}

.certification-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}

.has-js #certification:not(.is-inview) .cert-eyebrow,
.has-js #certification:not(.is-inview) .cert-heading,
.has-js #certification:not(.is-inview) .cert-lead,
.has-js #certification:not(.is-inview) .cert-actions {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}

.has-js #certification:not(.is-inview) .certification-card-wrap {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
}

.has-js #certification:not(.is-inview) .cert-card-feature {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
}

#certification.is-inview .cert-eyebrow {
    animation: skillsReveal var(--duration-reveal-short) var(--ease-motion) forwards;
}

#certification.is-inview .cert-heading {
    animation: skillsReveal var(--duration-reveal-short) 0.12s var(--ease-motion) forwards;
}

#certification.is-inview .cert-lead {
    animation: skillsReveal var(--duration-reveal-short) 0.24s var(--ease-motion) forwards;
}

#certification.is-inview .cert-actions {
    animation: skillsReveal var(--duration-reveal-short) 0.36s var(--ease-motion) forwards;
}

#certification.is-inview .certification-card-wrap {
    animation: certCardReveal var(--duration-reveal) 0.14s var(--ease-motion) forwards;
}

#certification.is-inview .cert-card-feature:nth-child(1) {
    animation: skillsStepIn var(--duration-step) 0.38s var(--ease-motion) forwards;
}

#certification.is-inview .cert-card-feature:nth-child(2) {
    animation: skillsStepIn var(--duration-step) 0.5s var(--ease-motion) forwards;
}

#certification.is-inview .cert-card-feature:nth-child(3) {
    animation: skillsStepIn var(--duration-step) 0.62s var(--ease-motion) forwards;
}

#certification.is-inview .cert-card-feature:nth-child(4) {
    animation: skillsStepIn var(--duration-step) 0.74s var(--ease-motion) forwards;
}

#certification.is-inview .cert-card-feature:nth-child(5) {
    animation: skillsStepIn var(--duration-step) 0.86s var(--ease-motion) forwards;
}

@keyframes certCardReveal {
    from {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.certification-content {
    min-width: 0;
}

.cert-eyebrow {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cert-teal);
}

.cert-heading {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--cert-navy);
}

.cert-lead {
    margin: 0 0 28px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cert-text);
    max-width: 36rem;
}

.cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition:
        transform var(--duration-ui) var(--ease-motion),
        background-color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion),
        box-shadow var(--duration-ui) var(--ease-motion);
}

.cert-btn__ext {
    display: flex;
    line-height: 0;
}

.cert-btn--primary {
    background: var(--cert-navy);
    color: #ffffff;
    border: 2px solid var(--cert-navy);
}

.cert-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(10, 17, 114, 0.22);
}

.cert-btn--secondary {
    background: transparent;
    color: var(--cert-navy);
    border: 2px solid var(--cert-navy);
}

.cert-btn--secondary:hover {
    background: rgba(10, 17, 114, 0.06);
}

.certification-card-wrap {
    min-width: 0;
}

.cert-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 22px 8px;
    border: 1px solid #e8ecf1;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 0 1px rgba(15, 23, 42, 0.06);
}

.cert-card__top {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f5;
}

.cert-card__thumb {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.cert-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cert-card__title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--cert-navy);
}

.cert-card__subtitle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3b6ea5;
    line-height: 1.35;
}

.cert-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-card-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef1f5;
}

.cert-card-feature:last-child {
    border-bottom: none;
}

.cert-card-feature__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-card-feature__text {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cert-card-blue);
    padding-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .has-js #certification:not(.is-inview) .cert-eyebrow,
    .has-js #certification:not(.is-inview) .cert-heading,
    .has-js #certification:not(.is-inview) .cert-lead,
    .has-js #certification:not(.is-inview) .cert-actions,
    .has-js #certification:not(.is-inview) .certification-card-wrap,
    .has-js #certification:not(.is-inview) .cert-card-feature {
        opacity: 1 !important;
        transform: none !important;
    }

    #certification .cert-eyebrow,
    #certification .cert-heading,
    #certification .cert-lead,
    #certification .cert-actions,
    #certification .certification-card-wrap,
    #certification .cert-card-feature {
        animation: none !important;
    }
}

/* CTA Section */
.cta {
    --cta-navy: #0f2137;

    padding: 88px 0;
    background-color: #ffffff;
    text-align: center;
}

.cta-container {
    margin: 0 auto;
}

.has-js #cta:not(.is-inview) .cta-title,
.has-js #cta:not(.is-inview) .cta-desc,
.has-js #cta:not(.is-inview) .cta-btn {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}

#cta.is-inview .cta-title {
    animation: skillsReveal var(--duration-reveal-short) var(--ease-motion) forwards;
}

#cta.is-inview .cta-desc {
    animation: skillsReveal var(--duration-reveal-short) 0.2s var(--ease-motion) forwards;
}

#cta.is-inview .cta-btn:nth-child(1) {
    animation: skillsReveal var(--duration-reveal-short) 0.4s var(--ease-motion) forwards;
}

#cta.is-inview .cta-btn:nth-child(2) {
    animation: skillsReveal var(--duration-reveal-short) 0.6s var(--ease-motion) forwards;
}

#cta.is-inview .cta-btn:nth-child(3) {
    animation: skillsReveal var(--duration-reveal-short) 0.8s var(--ease-motion) forwards;
}

.cta-title {
    margin: 0 auto 18px;
    max-width: 36rem;
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--cta-navy);
}

.cta-desc {
    margin: 0 auto 32px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4b5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    min-height: 46px;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 6px;
    text-decoration: none;
    transition:
        transform var(--duration-ui) var(--ease-motion),
        background-color var(--duration-ui) var(--ease-motion),
        border-color var(--duration-ui) var(--ease-motion),
        box-shadow var(--duration-ui) var(--ease-motion);
}

.cta-btn--primary {
    background: var(--cta-navy);
    color: #ffffff;
    border: 2px solid var(--cta-navy);
}

.cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 33, 55, 0.2);
}

.cta-btn--outline {
    background: #ffffff;
    color: var(--cta-navy);
    border: 2px solid var(--cta-navy);
}

.cta-btn--outline:hover {
    background: rgba(15, 33, 55, 0.04);
}

.cta-btn--soft {
    background: #e8eef5;
    color: var(--cta-navy);
    border: 2px solid #e2e8f0;
}

.cta-btn--soft:hover {
    background: #dde5f0;
    border-color: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
    .has-js #cta:not(.is-inview) .cta-title,
    .has-js #cta:not(.is-inview) .cta-desc,
    .has-js #cta:not(.is-inview) .cta-btn {
        opacity: 1 !important;
        transform: none !important;
    }

    #cta .cta-title,
    #cta .cta-desc,
    #cta .cta-btn {
        animation: none !important;
    }

    .cta-btn--primary:hover,
    .cta-btn--outline:hover,
    .cta-btn--soft:hover {
        transform: none;
    }
}

/* Footer */
.footer {
    --footer-bg: #002d4e;
    --footer-muted: #d1d5db;

    background-color: var(--footer-bg);
    color: #ffffff;
    padding: 64px 0 28px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(32px, 4vw, 48px);
    margin-bottom: 40px;
    align-items: start;
}

.has-js #site-footer:not(.is-inview) .footer-col {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

.has-js #site-footer:not(.is-inview) .footer-bar {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
}

#site-footer.is-inview .footer-col:nth-child(1) {
    animation: skillsReveal var(--duration-reveal-short) var(--ease-motion) forwards;
}

#site-footer.is-inview .footer-col:nth-child(2) {
    animation: skillsReveal var(--duration-reveal-short) 0.14s var(--ease-motion) forwards;
}

#site-footer.is-inview .footer-col:nth-child(3) {
    animation: skillsReveal var(--duration-reveal-short) 0.28s var(--ease-motion) forwards;
}

#site-footer.is-inview .footer-col:nth-child(4) {
    animation: skillsReveal var(--duration-reveal-short) 0.42s var(--ease-motion) forwards;
}

#site-footer.is-inview .footer-bar {
    animation: skillsReveal var(--duration-reveal-short) 0.52s var(--ease-motion) forwards;
}

.footer-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 16px;
}

.footer-logo__img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.footer-tagline {
    margin: 0;
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--footer-muted);
}

.footer-heading {
    margin: 0 0 18px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

.footer-links a {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--footer-muted);
    text-decoration: none;
    transition: color var(--duration-ui) var(--ease-motion), text-decoration var(--duration-ui) var(--ease-motion);
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-col--platform {
    display: flex;
    flex-direction: column;
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.footer-social__link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition:
        transform var(--duration-ui) var(--ease-motion),
        opacity var(--duration-ui) var(--ease-motion),
        background-color var(--duration-ui) var(--ease-motion);
}

.footer-social__link:hover {
    transform: scale(1.08);
    background-color: rgba(255, 255, 255, 0.12);
}

.footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--footer-muted);
}

.footer-legal {
    font-size: 0.8125rem;
    color: var(--footer-muted);
}

.footer-legal a {
    color: var(--footer-muted);
    text-decoration: none;
    transition: color var(--duration-ui) var(--ease-motion);
}

.footer-legal a:hover {
    color: #ffffff;
}

.footer-legal__sep {
    color: rgba(209, 213, 219, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .has-js #site-footer:not(.is-inview) .footer-col,
    .has-js #site-footer:not(.is-inview) .footer-bar {
        opacity: 1 !important;
        transform: none !important;
    }

    #site-footer .footer-col,
    #site-footer .footer-bar {
        animation: none !important;
    }

    .footer-social__link:hover {
        transform: none;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-container,
    .skills-score-container,
    .employers-container,
    .certification-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-description {
        max-width: 100%;
    }

    .hero-buttons {
        justify-content: center;
    }

    .stats-grid {
        row-gap: 28px;
    }

    .stat-item {
        flex: 1 1 min(160px, 28%);
        max-width: 200px;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }

    .skills-score-content {
        max-width: 40rem;
        margin-inline: auto;
        text-align: center;
    }

    .skills-score-eyebrow,
    .skills-score-title {
        text-align: center;
    }

    .skills-score-lead,
    .skills-steps {
        text-align: left;
    }

    .skills-score-cta {
        width: 100%;
        max-width: 22rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .navbar-container {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .navbar-left {
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .navbar-logo-img {
        height: 40px;
        max-width: 160px;
    }

    .nav-links {
        display: none;
    }

    .nav-actions {
        gap: 10px;
        margin-left: 0;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    .hero {
        padding: 40px 0 60px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .stats-grid {
        row-gap: 24px;
    }

    .stat-item {
        flex: 1 1 calc(50% - 12px);
        max-width: none;
    }

    .employers-metrics {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cta-title {
        font-size: 1.85rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-btn {
        width: 100%;
        max-width: 22rem;
        margin-inline: auto;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cert-actions,
    .employers-buttons,
    .hero-buttons {
        flex-direction: column;
    }

    .employers-btn,
    .cert-btn {
        width: 100%;
    }

    .hero-cta {
        width: 100%;
    }

    .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .stats-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .stat-item {
        flex: none;
        width: 100%;
        max-width: 280px;
    }

    .skills-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .skills-step__num {
        margin-inline: auto;
    }

    .skills-step__body {
        text-align: left;
    }
}