/* ═══════════════════════════════════════════════════════════
   HOME PAGE — single-pass consolidated stylesheet
   Load order: base.css → modern-refresh.css → home.css →
               jobs.css → dashboard.css → final-overrides.css

   Rules that need to beat final-overrides.css use a two-class
   selector (e.g. .home-page .section) so they win the
   !important specificity battle without re-adding !important
   to home-page-unique selectors.
═══════════════════════════════════════════════════════════ */

/* ── 1. Font & page base ─────────────────────────────────── */
body:has(.home-page) {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    background: linear-gradient(180deg, #f2f7fd 0%, #ffffff 38%, #f2f7fd 100%) !important;
}
body:has(.home-page) .header {
    border-bottom-color: rgba(208, 213, 221, .72) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 12px 36px rgba(16, 24, 40, .06) !important;
}
body:has(.home-page) .brand-title { letter-spacing: -.03em; font-weight: 900; }
body:has(.home-page) .nav-link,
body:has(.home-page) .btn { font-weight: 850; letter-spacing: -.01em; }

/* ── 2. Home-page scope & tokens ─────────────────────────── */
.home-page {
    --home-blue:      #2c4699;
    --home-blue-dark: #293681;
    --home-green:     #2c4699;
    --home-ink:       #0b1230;
    --home-muted:     #475467;
    --home-line:      #d0d5dd;
    --home-soft:      #e6eefb;
    color: var(--home-ink);
}
.home-page .wrap { max-width: 1220px; }
.home-page h1,
.home-page h2,
.home-page h3 {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .01em;
    color: var(--home-ink);
}
.home-page .lead {
    max-width: 600px;
    color: var(--home-muted) !important;
    font-size: clamp(15px, 1.45vw, 18px) !important;
    line-height: 1.72 !important;
    font-weight: 500;
    margin-top: 18px !important;
}

/* ── 3. Buttons ───────────────────────────────────────────── */
.home-page .btn {
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: 11px 18px !important;
    box-shadow: none !important;
}
.home-page .btn:not(.outline) {
    background: var(--home-blue) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(53,86,176, .18) !important;
}
.home-page .btn:not(.outline):hover { background: var(--home-blue-dark) !important; }
.home-page .btn.dark    { background: #0b1230 !important; }
.home-page .btn.outline {
    border-color: #b7cef2 !important;
    background: #fff !important;
    color: var(--home-blue) !important;
}

/* ── 4. Section padding ───────────────────────────────────── */
.home-page .section,
.home-page .ai-difference-section,
.home-page .ai-screening-story,
.home-page .tracking-flow-section,
.home-page .audience-section,
.home-page .career-potential,
.home-page .home-stats-band,
.home-page .home-featured-jobs { padding-top: 42px !important; padding-bottom: 42px !important; }
.home-page .home-testimonials   { padding-top: 28px !important; padding-bottom: 42px !important; }
.home-page .section-title {
    max-width: 760px !important;
    margin-bottom: 28px !important;
}
.home-page .section-title p:last-child,
.home-page .ai-difference-copy p,
.home-page .ai-story-lead { color: var(--home-muted) !important; font-weight: 500 !important; }

/* ── 5. Eyebrow ───────────────────────────────────────────── */
/* Eyebrows / section kickers — text-only, gradient ink, no box */
.home-page .eyebrow,
.home-page .hero-copy:before {
    display: inline-flex !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: linear-gradient(90deg, #3556b0 0%, #4274d9 48%, #4274d9 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    animation: heroAccentFlow 4.5s ease-in-out infinite;
}

/* ── 6. Hero ──────────────────────────────────────────────── */
.home-page .hero {
    /* Top padding exceeds the bottom on purpose. The hero centres its content,
       so the difference between the two is what pushes the copy clear of the
       sticky header instead of leaving it crowded against it — the centring
       halves it, so 46px of extra padding buys ~23px of gap. box-sizing is
       border-box, so this shifts the content without making the hero taller:
       the band of the next section below the fold stays visible. */
    padding: 46px 0 32px !important;
    /* Just short of a full screen. A hero sized to exactly the viewport ends
       flush with the fold, which reads as the end of the page — leaving a band
       of the next section visible is what tells people there is more. */
    min-height: calc(100dvh - 172px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(ellipse 70% 55% at 5% 0%,   rgba(53,86,176, .13),  transparent 58%),
        radial-gradient(ellipse 55% 45% at 95% 5%,  rgba(7, 148, 85, .10),   transparent 55%),
        radial-gradient(ellipse 45% 35% at 60% 95%, rgba(66,116,217, .07), transparent 50%),
        linear-gradient(180deg, #ecf3fc 0%, #f2f7fd 50%, #ffffff 100%) !important;
}
.home-page .hero { position: relative !important; }
.home-page .hero > .wrap { width: 100%; position: relative; z-index: 1; }

/* Hero side illustrations — CV screening (left), hiring growth (right) */
.hero-side-art {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(190px, 16vw, 290px);
    pointer-events: none;
    z-index: 0;
}
.hero-side-art--left  { left:  clamp(10px, 3vw, 72px); }
.hero-side-art--right { right: clamp(10px, 3vw, 72px); }
.hero-side-art svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(66,116,217, .12));
    animation: heroArtFloat 7s ease-in-out infinite;
}
.hero-side-art--right svg { animation-delay: -3.5s; }
@keyframes heroArtFloat {
    0%, 100% { transform: translateY(-7px); }
    50%      { transform: translateY(7px); }
}

/* Animated internals — give each illustration a bit of life */
.hero-side-art svg .cv-scan,
.hero-side-art svg .cv-check,
.hero-side-art svg .cv-line,
.hero-side-art svg .cv-chip,
.hero-side-art svg .bar,
.hero-side-art svg .avatar,
.hero-side-art svg .sparkle { transform-box: fill-box; }

/* Left: magnifier sweeps up the CV, then settles */
.hero-side-art svg .cv-scan { animation: cvScan 5s ease-in-out infinite; }
@keyframes cvScan {
    0%, 100% { transform: translate(0, 0); }
    30%      { transform: translate(-8px, -104px); }
    60%      { transform: translate(2px, -46px); }
}
/* Left: match found — checkmark badge pops */
.hero-side-art svg .cv-check { transform-origin: center; animation: cvCheck 5s ease-in-out infinite; }
@keyframes cvCheck {
    0%, 55%, 100% { transform: scale(1); }
    68%           { transform: scale(1.22); }
    80%           { transform: scale(1); }
}
/* Left: text lines shimmer as they're read */
.hero-side-art svg .cv-line { animation: cvLine 2.6s ease-in-out infinite; }
.hero-side-art svg .cv-line-2 { animation-delay: .35s; }
.hero-side-art svg .cv-line-3 { animation-delay: .7s; }
@keyframes cvLine { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Left: skill chips fade in on a loop */
.hero-side-art svg .cv-chip { transform-origin: center; animation: cvChip 4.5s ease-in-out infinite; }
.hero-side-art svg .cv-chip-2 { animation-delay: .25s; }
.hero-side-art svg .cv-chip-3 { animation-delay: .5s; }
@keyframes cvChip {
    0%, 70%, 100% { transform: scale(1); }
    80%           { transform: scale(1.12); }
}

/* Right: bars rise and breathe, staggered */
.hero-side-art svg .bar { transform-origin: bottom; animation: barGrow 3.8s ease-in-out infinite; }
.hero-side-art svg .bar-2 { animation-delay: .18s; }
.hero-side-art svg .bar-3 { animation-delay: .36s; }
.hero-side-art svg .bar-4 { animation-delay: .54s; }
@keyframes barGrow { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }
/* Right: trend line draws itself, arrow fades in at the peak */
.hero-side-art svg .trend-line {
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
    animation: trendDraw 3.8s ease-in-out infinite;
}
@keyframes trendDraw { 0% { stroke-dashoffset: 210; } 45%, 100% { stroke-dashoffset: 0; } }
.hero-side-art svg .trend-arrow { animation: trendArrow 3.8s ease-in-out infinite; }
@keyframes trendArrow { 0%, 40% { opacity: 0; } 55%, 100% { opacity: 1; } }
/* Right: candidate avatars pop in sequence */
.hero-side-art svg .avatar { transform-origin: center; animation: avatarPop 4.4s ease-in-out infinite; }
.hero-side-art svg .avatar-2 { animation-delay: .15s; }
.hero-side-art svg .avatar-3 { animation-delay: .3s; }
.hero-side-art svg .avatar-4 { animation-delay: .45s; }
@keyframes avatarPop {
    0%, 60%, 100% { transform: scale(1); }
    72%           { transform: scale(1.16); }
}

/* Both: corner sparkles twinkle */
.hero-side-art svg .sparkle { transform-origin: center; animation: sparkleTwinkle 2.8s ease-in-out infinite; }
.hero-side-art--right svg .sparkle { animation-delay: -1.4s; }
@keyframes sparkleTwinkle {
    0%, 100% { transform: scale(.75) rotate(0deg); opacity: .55; }
    50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* The art is absolutely positioned, so it is hidden as soon as it would reach
   the centred text column rather than being allowed to sit behind it. Between
   1100 and 1280 it still fits if it is smaller and pushed further out — which
   covers 1280 and 1366, the two commonest laptop widths, where the hero used
   to be a narrow column with empty margins either side. */
@media (max-width: 1280px) and (min-width: 1101px) {
    .hero-side-art { width: clamp(150px, 13vw, 180px); }
    .hero-side-art--left { left: 8px; }
    .hero-side-art--right { right: 8px; }
}
@media (max-width: 1100px) { .hero-side-art { display: none; } }
body.theme-dark .hero-side-art { opacity: .9; }
body.theme-dark .hero-side-art svg { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }

/* Candidate "packet": leaves the CV card (left), arcs over the copy,
   and lands in the growth chart (right) — screened → hired. */
.hero-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-flow-packet {
    position: absolute;
    top: 50%;
    left: 9%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b7cef2, #3556b0 58%, #2c4699);
    box-shadow: 0 0 0 5px rgba(53,86,176, .14), 0 0 22px 6px rgba(53,86,176, .5);
    transform: translate(-50%, -50%);
    animation: heroFlowArc 6.5s ease-in-out infinite, heroFlowHue 6.5s ease-in-out infinite;
}
/* comet trail streaking behind it */
.hero-flow-packet::after {
    content: "";
    position: absolute;
    right: 60%;
    top: 50%;
    width: 64px;
    height: 5px;
    border-radius: 5px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(53,86,176, .55));
}
@keyframes heroFlowArc {
    0%        { left: 9%;  top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    9%        { opacity: 1; }
    50%       { left: 50%; top: 19%; }
    91%       { opacity: 1; }
    100%      { left: 91%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
}
/* indigo on the left → green as it reaches the hiring card */
@keyframes heroFlowHue {
    0%, 55%   { filter: hue-rotate(0deg); }
    85%, 100% { filter: hue-rotate(-98deg); }
}
@media (max-width: 1280px) { .hero-flow { display: none; } }

/* Hero copy grid */
.hero-copy-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr) !important;
    align-items: center !important;
    gap: 40px !important;
}
.hero-copy-grid > .hero-copy { max-width: 100%; text-align: left; }
.hero-copy-grid h1,
.hero-copy-grid .lead,
.hero-copy-grid .search { margin-left: 0 !important; margin-right: 0 !important; }
.hero-copy-grid .hero-actions { justify-content: flex-start; }
.hero-copy-grid .search input:focus-visible { outline: 0 !important; box-shadow: none !important; }

/* Hero badge — same text-only eyebrow treatment as the sections */
.home-page .hero-copy { position: relative; }
.home-page .hero-copy:before {
    content: "Jobs and hiring, made clear";
    margin-bottom: 18px;
}

/* H1 */
.home-page h1,
.hero-copy-grid h1 {
    max-width: 720px;
    font-size: clamp(38px, 5vw, 66px) !important;
    line-height: 1.0 !important;
    letter-spacing: -.04em !important;
}

/* Gradient text accent on headline */
.hero-accent {
    background: linear-gradient(90deg, #3556b0 0%, #4274d9 48%, #4274d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% 100%;
    animation: heroAccentFlow 4.5s ease-in-out infinite;
    display: inline;
}

/* ── 7. Search bar ────────────────────────────────────────── */
.home-page .search {
    margin-top: 26px !important;
    border-width: 1.5px !important;
    border-color: #93b4e9 !important;
    border-radius: 18px !important;
    padding: 6px 6px 6px 10px !important;
    box-shadow: 0 14px 36px rgba(53,86,176, .10) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.home-page .search:focus-within {
    border-color: #3556b0 !important;
    box-shadow: 0 0 0 3px rgba(53,86,176, .11), 0 18px 42px rgba(53,86,176, .13) !important;
}
.home-page .search-inner { min-height: 50px !important; }
.home-page .search-inner input { font-size: 15px !important; font-weight: 600 !important; }
.home-page .search .btn {
    min-height: 44px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    letter-spacing: -.01em !important;
}

/* ── 8. Trust strip ───────────────────────────────────────── */

/* ── 9. Path cards ────────────────────────────────────────── */
.home-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
    max-width: 690px;
}
.home-path-card {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 16px 36px 16px 16px;
    border: 1px solid #d5e3f7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .06);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-path-card:first-child {
    border-left: 3px solid #3556b0;
    background: linear-gradient(145deg, rgba(53,86,176, .05) 0%, rgba(255, 255, 255, .96) 58%);
}
.home-path-card:last-child {
    border-left: 3px solid #2c4699;
    background: linear-gradient(145deg, rgba(53,86,176, .05) 0%, rgba(255, 255, 255, .96) 58%);
}
.home-path-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(16, 24, 40, .09);
}
.home-path-card:first-child:hover { border-color: #8fb0e8; background: linear-gradient(145deg, rgba(53,86,176, .07) 0%, #fff 58%); }
.home-path-card:last-child:hover  { border-color: #8fb0e8; background: linear-gradient(145deg, rgba(53,86,176, .07) 0%, #fff 58%); }

/* Label badge */
.home-path-card > span:not(.home-path-arrow) {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.home-path-card:first-child > span:not(.home-path-arrow) {
    background: rgba(53,86,176, .08);
    border-color: rgba(53,86,176, .2);
    color: #3556b0;
}
.home-path-card:last-child > span:not(.home-path-arrow) {
    background: rgba(53,86,176, .08);
    border-color: rgba(53,86,176, .2);
    color: #2c4699;
}
.home-path-card strong { color: var(--home-ink); font-size: 15px; font-weight: 900; line-height: 1.35; }
.home-path-card small  { color: var(--home-muted); font-size: 13px; line-height: 1.55; font-weight: 700; }
.home-path-arrow {
    position: absolute;
    right: 13px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    transition: transform .18s ease, background .18s ease;
}
.home-path-card:first-child .home-path-arrow { background: rgba(53,86,176, .1); color: #3556b0; }
.home-path-card:last-child  .home-path-arrow { background: rgba(53,86,176, .1);  color: #2c4699; }
.home-path-arrow::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, 1px);
}
.home-path-card:hover .home-path-arrow { transform: translateX(3px); }
.home-path-card:first-child:hover .home-path-arrow { background: #d5e3f7; }
.home-path-card:last-child:hover  .home-path-arrow { background: #d5e3f7; }

/* ── 10. Hero photo card ──────────────────────────────────── */
.hero-photo-card {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    max-height: calc(100dvh - 240px);
    margin-top: 0;
    border: 1.5px solid #b7cef2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 64px rgba(53,86,176, .14), 0 4px 12px rgba(15, 23, 42, .06);
}
.hero-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    max-height: calc(100dvh - 240px);
    object-fit: cover;
}
.hero-photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, .62));
    pointer-events: none;
}
.hero-photo-card figcaption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    padding: 14px;
    color: #0b1230;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 34px rgba(16, 24, 40, .14);
}
.hero-photo-card figcaption strong { font-size: 16px; }
.hero-photo-card figcaption span   { color: #475467; font-size: 13px; font-weight: 800; line-height: 1.45; }

/* ── 11. Hero chips ───────────────────────────────────────── */
.hero-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    backdrop-filter: blur(14px);
    padding: 8px 12px;
    pointer-events: none;
    animation: heroChipFloat 5s ease-in-out infinite;
}
.hero-chip-match {
    top: 18px;
    left: 18px;
    border: 1px solid rgba(187, 247, 208, .45);
    border-left: 3px solid #4274d9;
    background: rgba(240, 253, 244, .72);
}
.hero-chip-match strong {
    color: #2c4699;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}
.hero-chip-match span { color: #1b3168; font-size: 11px !important; font-weight: 800 !important; line-height: 1.3; }
.hero-chip-stage {
    top: 18px;
    right: 18px;
    border: 1px solid rgba(188,210,242, .45);
    border-left: 3px solid #6693e0;
    background: rgba(240, 249, 255, .72);
    color: #2d51a8;
    font-size: 12px;
    font-weight: 900;
    animation-delay: 1.2s;
}
.hero-chip-stage i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #4274d9;
    animation: chipDotPulse 2s ease-in-out infinite;
    font-style: normal;
}

/* ── 12. AI Difference section ────────────────────────────── */
.ai-difference-section { padding-top: 26px !important; padding-bottom: 38px !important; }
/* Centered header, cards directly on the section band */
.ai-difference-copy {
    max-width: 800px;
    margin: 0 auto 34px;
    text-align: center;
}
.ai-difference-copy .eyebrow { margin: 0 0 14px !important; }
.ai-difference-copy h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: 0; }
.ai-difference-copy p  { max-width: 660px; margin: 16px auto 0; font-size: 17px; line-height: 1.7; font-weight: 500; }
.ai-difference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ai-difference-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-difference-card:hover { transform: translateY(-3px); }
.ai-difference-card:nth-child(1):hover { border-color: #93b4e9; box-shadow: 0 18px 34px rgba(66,116,217, .12), 0 0 0 4px rgba(66,116,217, .05); }
.ai-difference-card:nth-child(2):hover { border-color: #8fb0e8; box-shadow: 0 18px 34px rgba(53,86,176, .12), 0 0 0 4px rgba(53,86,176, .05); }
.ai-difference-card:nth-child(3):hover { border-color: #fdba74; box-shadow: 0 18px 34px rgba(181, 71, 8, .12), 0 0 0 4px rgba(181, 71, 8, .05); }
.ai-difference-card .icon-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #e6eefb !important;
    color: #2c4699 !important;
}
.ai-difference-card .icon-mark svg,
.tracking-flow .flow-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ai-difference-card small {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    background: #f8fafc;
    padding: 5px 9px;
    color: #475467;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ai-difference-card h3 { font-size: 18px; line-height: 1.25; }
.ai-difference-card p  { margin: 0; font-size: 14px; line-height: 1.65; font-weight: 500; }
.ai-difference-card:nth-child(1) { border-top: 3px solid #2c4699; background: linear-gradient(160deg, #fff 0%, #e6eefb 100%); }
.ai-difference-card:nth-child(2) { border-top: 3px solid #2c4699; background: linear-gradient(160deg, #fff 0%, #eef4fc 100%); }
.ai-difference-card:nth-child(2) .icon-mark { background: #e6eefb !important; color: #2c4699 !important; }
.ai-difference-card:nth-child(2) small      { background: #e6eefb; color: #2c4699; }
.ai-difference-card:nth-child(3) { border-top: 3px solid #b54708; background: linear-gradient(160deg, #fff 0%, #fff7ed 100%); }
.ai-difference-card:nth-child(3) .icon-mark { background: #fff7ed !important; color: #b54708 !important; }
.ai-difference-card:nth-child(3) small      { background: #fff7ed; color: #b54708; }
.ai-card-stat {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(16, 24, 40, .06);
    background: rgba(16, 24, 40, .03);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #344054;
}
.ai-difference-card:nth-child(1) .ai-card-stat { border-color: rgba(66,116,217, .18); background: rgba(66,116,217, .06); color: #2c4699; }
.ai-difference-card:nth-child(2) .ai-card-stat { border-color: rgba(53,86,176, .18); background: rgba(53,86,176, .06); color: #2c4699; }
.ai-difference-card:nth-child(3) .ai-card-stat { border-color: rgba(181, 71, 8, .18); background: rgba(181, 71, 8, .06); color: #b54708; }

/* ── 13. AI Screening story ───────────────────────────────── */
.ai-screening-story { padding-top: 18px !important; }
/* Immersive photo stage: copy on the photo (left, over a scrim),
   screening panel floating right */
.ai-story-stage { position: relative; margin-top: 8px; }
.ai-story-photo {
    display: block;
    width: 100%;
    height: clamp(480px, 46vw, 580px);
    border: 1px solid #d5e3f7;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .08);
}
.ai-story-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(100deg,
        rgba(11, 8, 30, .86) 0%,
        rgba(11, 8, 30, .62) 42%,
        rgba(11, 8, 30, .18) 72%,
        rgba(11, 8, 30, .05) 100%);
}
.ai-story-overlay {
    position: absolute;
    left: clamp(24px, 4.5vw, 60px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: min(480px, 44%);
}
.ai-story-overlay .eyebrow {
    background: linear-gradient(90deg, #b7cef2 0%, #bcd2f2 48%, #93b4e9 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    margin-bottom: 12px !important;
}
.ai-story-overlay h2 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: 0;
}
.ai-story-overlay .ai-story-lead {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}
.ai-story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ai-story-overlay .btn.dark {
    background: #fff !important;
    color: #0b1230 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3) !important;
}
.ai-story-overlay .btn.outline {
    border-color: rgba(255, 255, 255, .55) !important;
    background: transparent !important;
    color: #fff !important;
}
.ai-story-stage .ai-screen-preview {
    position: absolute;
    right: clamp(20px, 4vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: min(400px, 42%);
}
.ai-screen-preview {
    display: grid;
    gap: 14px;
    border: 1px solid #b7cef2;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f2f7fd);
    padding: 20px;
    box-shadow: 0 18px 42px rgba(66,116,217, .10);
}
.ai-screen-preview-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #d5e3f7;
    padding-bottom: 14px;
}
.ai-screen-preview-head span   { color: #2c4699; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.ai-screen-preview-head strong { color: #2c4699; font-size: 52px; line-height: .9; }
.ai-screen-bars { display: grid; gap: 10px; }
.ai-screen-bars div {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce8f9;
    border-radius: 14px;
    background: #f2f7fd;
    padding: 11px 12px 15px;
}
.ai-screen-bars span   { display: block; color: #667085; font-size: 11px; font-weight: 900; }
.ai-screen-bars strong { display: block; margin-top: 3px; color: #0b1230; font-size: 14px; }
.ai-screen-bars i      { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 999px; background: #2c4699; }
.ai-screen-bars div:nth-child(2) i { background: #2c4699; }
.ai-screen-bars div:nth-child(3) i { background: #f79009; }
.ai-screen-note {
    border: 1px solid #93b4e9;
    border-radius: 12px;
    background: #eef4fc;
    padding: 13px;
}
.ai-screen-note strong { display: block; color: #1b3168; font-size: 14px; }
.ai-screen-note p      { margin: 5px 0 0; color: #475467; font-size: 12px; line-height: 1.55; font-weight: 800; }

/* ── 14. Tracking flow ────────────────────────────────────── */
.tracking-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.tracking-flow article {
    position: relative;
    min-width: 0;
    border: 1px solid #d5e3f7;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
}
.tracking-flow article::after {
    content: "";
    position: absolute;
    top: 32px;
    right: -11px;
    width: 12px;
    height: 2px;
    background: #8fb0e8;
}
.tracking-flow article:last-child::after { display: none; }
.tracking-flow .flow-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #e6eefb !important;
    color: #2c4699 !important;
}
.tracking-flow article:nth-child(2) .flow-icon { background: #eef4fc !important; color: #2d51a8 !important; }
.tracking-flow article:nth-child(3) .flow-icon { background: #e6eefb !important; color: #2c4699 !important; }
.tracking-flow article:nth-child(4) .flow-icon { background: #fff7ed !important; color: #b54708 !important; }
.tracking-flow article:nth-child(5) .flow-icon { background: #eef4fc !important; color: #4274d9 !important; }
.tracking-flow article > small {
    position: absolute;
    right: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #f8fafc;
    color: #2c4699;
    font-size: 12px;
    font-weight: 950;
}
.tracking-flow h3 { margin-top: 16px !important; font-size: 17px; }
.tracking-flow p  { margin: 8px 0 0; color: var(--home-muted, #475467); font-size: 13px; line-height: 1.6; font-weight: 800; }

/* Animated journey: each step lights up in sequence, the dash hands
   off to the next step. One full pass = 9s (5 steps × 1.8s). */
.tracking-flow article { animation: trackingStep 9s ease-in-out infinite; }
.tracking-flow .flow-icon { animation: trackingIcon 9s ease-in-out infinite; }
.tracking-flow article::after { animation: trackingDash 9s ease-in-out infinite; }
.tracking-flow article:nth-child(2),
.tracking-flow article:nth-child(2) .flow-icon,
.tracking-flow article:nth-child(2)::after { animation-delay: 1.8s; }
.tracking-flow article:nth-child(3),
.tracking-flow article:nth-child(3) .flow-icon,
.tracking-flow article:nth-child(3)::after { animation-delay: 3.6s; }
.tracking-flow article:nth-child(4),
.tracking-flow article:nth-child(4) .flow-icon,
.tracking-flow article:nth-child(4)::after { animation-delay: 5.4s; }
.tracking-flow article:nth-child(5),
.tracking-flow article:nth-child(5) .flow-icon { animation-delay: 7.2s; }
@keyframes trackingStep {
    0%, 24%, 100% {
        transform: translateY(0);
        border-color: #d5e3f7;
        box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
    }
    8%, 16% {
        transform: translateY(-8px);
        border-color: #6693e0;
        box-shadow: 0 20px 38px rgba(55, 185, 125, .28);
    }
}
@keyframes trackingIcon {
    0%, 24%, 100% { transform: scale(1); }
    8%, 16%       { transform: scale(1.14); }
}
@keyframes trackingDash {
    0%, 14%, 30%, 100% { background: #93b4e9; width: 12px; }
    18%, 26%           { background: #4274d9; width: 16px; }
}

/* ── 15. Audience cards ───────────────────────────────────── */
.audience-section { padding-top: 34px !important; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.audience-card {
    border: 1px solid #d5e3f7;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, #e6eefb);
    padding: 22px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .07);
}
.audience-card.company { background: linear-gradient(135deg, #fff, #eef4fc); }
.audience-card > img {
    display: block;
    width: 100%;
    height: 240px;
    margin: 0 0 22px;
    border: 1px solid #d5e3f7;
    border-radius: 14px;
    object-fit: cover;
}
.audience-card .eyebrow { margin-bottom: 12px !important; }
.audience-card h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: 0; }
.audience-card ul {
    display: grid;
    gap: 11px;
    margin: 20px 0 0;
    padding-left: 0 !important;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 850;
}
.audience-card li {
    list-style: none !important;
    position: relative;
    padding-left: 24px !important;
    color: #344054;
}
.audience-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23eef2ff' stroke='%23c7d2fe'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%234f46e5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.audience-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.audience-cta .btn { min-height: 42px !important; }

/* ── 16. Featured jobs ────────────────────────────────────── */
.featured-jobs-row {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.featured-job-slot {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.featured-job-slot .job-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: hidden;
    border-radius: 16px !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.featured-job-slot .job-card:hover {
    transform: translateY(-4px) !important;
    border-color: #8fb0e8 !important;
    box-shadow: 0 22px 48px rgba(16, 24, 40, .10) !important;
}
.featured-job-slot .job-card .tags { margin-top: auto !important; padding-top: 18px !important; }
.featured-job-slot .job-card .btn  { width: 100% !important; }
.featured-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--kdx-border, #bcd2f2);
    border-radius: 16px;
    color: #667085;
    font-size: 15px;
    line-height: 1.6;
}
.featured-empty a { color: #2c4699; font-weight: 800; }

/* Featured jobs — horizontal carousel */
.featured-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 26px !important;
}
.featured-head .featured-head-title {
    margin: 0 !important;
    text-align: left !important;
    max-width: 640px !important;
}
.featured-nav {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    padding-bottom: 6px;
}
.featured-arrow {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #cdd8ee !important;
    background: #fff !important;
    color: #16233f !important;
    cursor: pointer;
    padding: 0 !important;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.featured-arrow svg { width: 18px !important; height: 18px !important; }
.featured-arrow:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, .14) !important; transform: translateY(-1px); }
.featured-arrow.is-dark { background: #16233f !important; border-color: #16233f !important; color: #fff !important; }
.featured-arrow:disabled { opacity: .38 !important; cursor: default; box-shadow: none !important; transform: none !important; }

.featured-carousel { position: relative; }
.featured-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 4px 18px !important;
    margin: 0 -4px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.featured-track::-webkit-scrollbar { display: none; }
.featured-track .featured-job-slot {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
    scroll-snap-align: start;
}
@media (max-width: 760px) {
    .featured-head { flex-wrap: wrap !important; }
    .featured-track .featured-job-slot { flex-basis: 84% !important; width: 84% !important; max-width: 84% !important; }
}

/* ── 17. Testimonials ─────────────────────────────────────── */
.home-testimonials .section-title {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}
.testimonial-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    border: 1px solid #d5e3f7;
    border-radius: 18px;
    background: #fff;
    padding: 26px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.testimonial-card:hover { transform: translateY(-3px); border-color: #8fb0e8; box-shadow: 0 16px 38px rgba(16, 24, 40, .09); }
.testimonial-quote {
    display: block;
    color: #93b4e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 52px;
    line-height: .7;
    font-weight: 700;
    margin-bottom: 12px;
}
.testimonial-card p {
    margin: 0;
    flex: 1;
    color: #344054;
    font-size: 15px;
    line-height: 1.72;
    font-weight: 500;
}
.testimonial-stars {
    font-size: 14px;
    color: #f59132;
    letter-spacing: 3px;
    margin-top: 14px;
}
.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    border-top: 1px solid #e4e7ec;
    padding-top: 14px;
}
.testimonial-footer strong { display: block; color: #0b1230; font-size: 14px; font-weight: 900; }
.testimonial-footer span   { display: block; margin-top: 2px; color: #667085; font-size: 12px; font-weight: 700; }
.testimonial-avatar {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid #fff;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px #d5e3f7, 0 4px 10px rgba(16, 24, 40, .12);
}

/* ── 18. Stats band ───────────────────────────────────────── */
.home-stats-band {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: linear-gradient(135deg, #e6eefb, #e6eefb) !important;
}
.home-stats-intro { margin: 0 auto 24px; text-align: center; }
.home-stats-intro .eyebrow { width: max-content; margin: 0 auto 10px !important; }
.home-stats-intro p:last-child { margin: 0; font-size: 16px; font-weight: 800; }
.home-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
.home-stats-row > .stat {
    justify-content: center;
    min-width: 0;
    gap: 18px !important;
    min-height: 126px;
    padding: 24px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .9) !important;
}
.home-stats-row > .stat .icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    flex: 0 0 auto;
}
.home-stats-row > .stat .tiny { display: block; line-height: 1.2; font-weight: 800; }
.home-stats-row > .stat-value { font-size: 42px !important; line-height: 1 !important; }

/* ── 19. Career potential / journey grid ──────────────────── */
.career-potential { padding-top: 18px; }
.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.journey-card {
    position: relative;
    overflow: hidden;
    min-height: 184px;
    border: 1px solid #dce8f9;
    border-radius: 18px;
    background: #fff;
    padding: 26px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
}
.journey-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #2c4699, #4274d9);
}
.journey-grid > article:nth-child(2)::after { background: linear-gradient(90deg, #2c4699, #4274d9); }
.journey-grid > article:nth-child(3)::after { background: linear-gradient(90deg, #b54708, #f59e0b); }
.journey-grid > article:nth-child(4)::after { background: linear-gradient(90deg, #4274d9, #6693e0); }
.journey-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #0d1330;
    color: #fff;
    font-weight: 950;
    margin-bottom: 18px;
}
.journey-card h3 { font-size: 16px; }
.journey-card p  { font-size: 13px; line-height: 1.7; color: #374151; }

/* ── 20. CTA band ─────────────────────────────────────────── */
.home-cta-band {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background: linear-gradient(130deg, #0b1230 0%, #24326a 55%, #2c4699 100%);
}
.home-cta-band::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    pointer-events: none;
}
.home-cta-band::after {
    content: "";
    position: absolute;
    left: -40px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    pointer-events: none;
}
.home-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}
.home-cta-copy .eyebrow {
    background: linear-gradient(90deg, #b7cef2 0%, #bcd2f2 48%, #93b4e9 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    margin-bottom: 14px !important;
}
.home-cta-copy h2 {
    font-size: clamp(26px, 3.2vw, 44px) !important;
    line-height: 1.1 !important;
    color: #fff !important;
    letter-spacing: -.02em !important;
}
.home-cta-copy p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
}
.home-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
.home-cta-actions .btn:not(.outline) {
    background: #fff !important;
    color: #2c4699 !important;
    border-color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18) !important;
}
.home-cta-actions .btn:not(.outline):hover {
    background: #e6eefb !important;
    box-shadow: 0 18px 32px rgba(0, 0, 0, .22) !important;
}
.home-cta-actions .btn.outline {
    border-color: rgba(255, 255, 255, .48) !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
.home-cta-actions .btn.outline:hover {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .8) !important;
}

/* ── 21. About page styles ────────────────────────────────── */
/* .about-story, .about-values, .about-value base comes from
   final-overrides.css; we only add what's unique here. */
.about-story { grid-template-columns: 1.1fr .9fr; align-items: start; }
.about-panel {
    border: 1px solid #d5e3f7;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff, #f2f7fd);
    padding: 32px;
    box-shadow: 0 20px 44px rgba(66,116,217, .10);
}
.about-panel p { color: #475569; line-height: 1.85; }
.about-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.about-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d5e3f7;
    border-radius: 999px;
    background: #fff;
    padding: 8px 14px;
    color: #2d51a8;
    font-size: 13px;
    font-weight: 900;
}
.about-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-metric {
    border: 1px solid #d5e3f7;
    border-radius: 22px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.about-metric strong { display: block; font-size: 28px; line-height: 1; color: #0d1330; }
.about-metric span   { display: block; margin-top: 8px; color: #64748b; font-weight: 800; }
.about-value h3 { margin-bottom: 10px; }
.about-value p  { margin: 0; color: #475569; line-height: 1.75; }

/* ── 22. Footer ───────────────────────────────────────────── */
.footer {
    position: relative;
    margin-top: 72px;
    border-top: 1px solid #d5e3f7;
    background: linear-gradient(180deg, #f2f7fd 0%, #fff 42%, #f8fafc 100%);
    padding: 0 0 52px;
    overflow: hidden;
}
.footer .wrap { position: relative; z-index: 1; }
.footer-top {
    display: grid;
    grid-template-columns: minmax(300px, 1.28fr) repeat(3, minmax(150px, 1fr));
    gap: 46px;
    min-height: 360px;
    align-items: start;
    padding-top: 28px;
}
.footer-about { display: grid; gap: 18px; max-width: 450px; }
.footer-logo  { display: flex; align-items: center; gap: 12px; color: #2d51a8; font-size: 29px; font-weight: 950; line-height: 1; }
.footer-logo img { width: 46px; height: 46px; }
.footer-about p { margin: 0; color: #334155; font-size: 15px; line-height: 1.75; }
.footer-links { display: grid; gap: 14px; color: #0d1330; font-size: 16px; }
.footer-links strong { margin-bottom: 8px; color: #070414; font-size: 20px; }
.footer-links a { color: #101a3d; line-height: 1.35; transition: .2s; }
.footer-links a:hover { color: #2d51a8; transform: translateX(3px); }
.footer-bottom {
    margin-top: 42px;
    border-top: 1px solid #d5e3f7;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.footer-bottom .tiny { color: #0d1330; font-weight: 800; }
.social-row { display: flex; align-items: center; gap: 18px; }
.social-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #070414;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
    transition: .2s;
}
.social-dot svg { width: 23px; height: 23px; fill: currentColor; }
.social-dot:hover { background: #2d51a8; color: #fff; transform: translateY(-3px); }

/* ── 23. Scroll reveal ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .home-page [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .48s ease, transform .48s ease;
    }
    .home-page [data-reveal].is-visible { opacity: 1; transform: none; }
    .home-page [data-reveal][data-delay="1"] { transition-delay: .1s; }
    .home-page [data-reveal][data-delay="2"] { transition-delay: .2s; }
    .home-page [data-reveal][data-delay="3"] { transition-delay: .3s; }
    .home-page [data-reveal][data-delay="4"] { transition-delay: .4s; }
    /* Staggered rows: container itself stays visible, children animate in */
    .home-page .tracking-flow[data-reveal],
    .home-page .journey-grid[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .home-page .tracking-flow[data-reveal] > article,
    .home-page .journey-grid[data-reveal] > article { opacity: 0; transform: translateY(16px); transition: opacity .38s ease, transform .38s ease; }
    .home-page .tracking-flow.is-visible > article,
    .home-page .journey-grid.is-visible > article { opacity: 1; transform: none; }
    .home-page .tracking-flow.is-visible > article:nth-child(2),
    .home-page .journey-grid.is-visible > article:nth-child(2) { transition-delay: .08s; }
    .home-page .tracking-flow.is-visible > article:nth-child(3),
    .home-page .journey-grid.is-visible > article:nth-child(3) { transition-delay: .16s; }
    .home-page .tracking-flow.is-visible > article:nth-child(4),
    .home-page .journey-grid.is-visible > article:nth-child(4) { transition-delay: .24s; }
    .home-page .tracking-flow.is-visible > article:nth-child(5) { transition-delay: .32s; }
}

/* ── 24. Keyframes ────────────────────────────────────────── */
@keyframes heroAccentFlow {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
@keyframes heroChipFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}
@keyframes chipDotPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(66,116,217, .45); }
    50%       { box-shadow: 0 0 0 5px rgba(66,116,217, .0); }
}

/* ── 25. Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-accent                   { animation: none !important; background-position: 0% 50%; }
    .home-page .hero-copy:before,
    .home-page .eyebrow,
    .hero-side-art svg,
    .hero-side-art svg *,
    .hero-chip,
    .tracking-flow article,
    .tracking-flow .flow-icon,
    .tracking-flow article::after,
    .hero-chip-stage i             { animation: none !important; }
    .hero-side-art svg .trend-line { stroke-dashoffset: 0; }
    .hero-side-art svg .cv-line    { opacity: 1; }
    .hero-flow                     { display: none; }
}

/* ── 25b. Odd-section bands — BgSuccess from brand palette ── */
.home-page .ai-difference-section,
/* ── Section background rhythm ───────────────────────────────
   Alternating full-width bands so every section reads as distinct.
   Order (after the hero): white → blue → white → blue → white →
   dark(cta) → sand → dark(stats). Hairline dividers make each
   band edge crisp even where the tones are soft. */
.home-page .ai-difference-section,
.home-page .home-featured-jobs,
.home-page .audience-section {
    background: #ffffff !important;              /* clean white bands */
    border-top: 1px solid #e6edf9 !important;
    border-bottom: 1px solid #e6edf9 !important;
}
.home-page .home-testimonials,
.home-page .tracking-flow-section {
    background: #e4ecfb !important;              /* soft blue bands */
    border-top: 1px solid #cfddf5 !important;
    border-bottom: 1px solid #cfddf5 !important;
}
.home-page .career-potential {
    background: #fbf3e9 !important;              /* warm sand band between the two dark bands */
    border-top: 1px solid #f0e2cd !important;
    border-bottom: 1px solid #f0e2cd !important;
}
body.theme-dark .home-page .ai-difference-section,
body.theme-dark .home-page .home-featured-jobs,
body.theme-dark .home-page .audience-section {
    background: #0b1330 !important;
    border-top-color: #1c294c !important;
    border-bottom-color: #1c294c !important;
}
body.theme-dark .home-page .home-testimonials,
body.theme-dark .home-page .tracking-flow-section {
    background: #0e1a3d !important;
    border-top-color: #223056 !important;
    border-bottom-color: #223056 !important;
}
body.theme-dark .home-page .career-potential {
    background: #15182f !important;
    border-top-color: #2c2a44 !important;
    border-bottom-color: #2c2a44 !important;
}
.home-page .tracking-flow article::after { background: #93b4e9; }

/* ── 26. Dark mode ────────────────────────────────────────── */
body.theme-dark .home-page .eyebrow,
body.theme-dark .home-page .hero-copy:before {
    background: linear-gradient(90deg, #8fb0e8 0%, #93b4e9 48%, #8fb0e8 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
body.theme-dark:has(.home-page) {
    background: linear-gradient(180deg, #070c1e 0%, #0d1330 100%) !important;
}
body.theme-dark:has(.home-page) .header {
    background: rgba(11, 18, 32, .86) !important;
    border-color: #2a3a70 !important;
}
body.theme-dark .home-page {
    --home-ink:   #f8fafc;
    --home-muted: #cbd5e1;
    --home-line:  #2a3a70;
    --home-soft:  #172450;
}
body.theme-dark .home-page .hero {
    background:
        radial-gradient(ellipse 70% 55% at 5% 0%,  rgba(102,147,224, .10), transparent 58%),
        radial-gradient(ellipse 55% 45% at 95% 5%,  rgba(66,116,217, .08),  transparent 55%),
        linear-gradient(180deg, #070c1e 0%, #0d1330 100%) !important;
}
body.theme-dark .home-path-card {
    border-color: #2a3a70;
    background: #101a3d;
    box-shadow: none;
}
body.theme-dark .home-path-card:first-child {
    border-left-color: rgba(102,147,224, .55);
    background: linear-gradient(145deg, rgba(102,147,224, .06) 0%, #101a3d 58%);
}
body.theme-dark .home-path-card:last-child {
    border-left-color: rgba(66,116,217, .55);
    background: linear-gradient(145deg, rgba(66,116,217, .06) 0%, #101a3d 58%);
}
body.theme-dark .home-path-card:first-child > span:not(.home-path-arrow) {
    background: rgba(102,147,224, .1);
    border-color: rgba(102,147,224, .25);
    color: #93b4e9;
}
body.theme-dark .home-path-card:last-child > span:not(.home-path-arrow) {
    background: rgba(66,116,217, .1);
    border-color: rgba(66,116,217, .25);
    color: #8fb0e8;
}
body.theme-dark .home-path-card:first-child .home-path-arrow { background: rgba(102,147,224, .12); color: #93b4e9; }
body.theme-dark .home-path-card:last-child  .home-path-arrow { background: rgba(66,116,217, .12); color: #8fb0e8; }
body.theme-dark .home-path-card strong      { color: #f8fafc; }
body.theme-dark .home-path-card small,
body.theme-dark .home-page .lead,
body.theme-dark .home-page .section-title p:last-child,
body.theme-dark .home-page .ai-difference-copy p,
body.theme-dark .home-page .ai-story-lead { color: #cbd5e1 !important; }

body.theme-dark .hero-photo-card {
    border-color: #2a3a70;
    background: #101a3d;
}
body.theme-dark .hero-photo-card figcaption {
    border-color: #2a3a70;
    background: rgba(17, 24, 39, .9);
    color: #f8fafc;
}
body.theme-dark .hero-photo-card figcaption span { color: #cbd5e1; }
body.theme-dark .ai-story-photo { border-color: #2a3a70; }
body.theme-dark .hero-chip-match { border: 1px solid rgba(20, 83, 45, .4); border-left: 3px solid #4274d9; background: rgba(5, 46, 22, .65); }
body.theme-dark .hero-chip-match strong { color: #8fb0e8 !important; }
body.theme-dark .hero-chip-match span   { color: #93b4e9 !important; }
body.theme-dark .hero-chip-stage { border: 1px solid rgba(30, 58, 95, .45); border-left: 3px solid #6693e0; background: rgba(15, 23, 42, .65); color: #93b4e9; }
body.theme-dark .ai-difference-copy h2,
body.theme-dark .ai-difference-card h3 { color: #f8fafc !important; }
body.theme-dark .ai-difference-copy p,
body.theme-dark .ai-difference-card p  { color: #cbd5e1 !important; }
body.theme-dark .ai-difference-card {
    border-color: #2a3a70;
    box-shadow: none;
}
body.theme-dark .ai-difference-card:nth-child(1) { border-top-color: #4274d9; background: linear-gradient(160deg, #101a3d 0%, #152147 100%); }
body.theme-dark .ai-difference-card:nth-child(2) { border-top-color: #4274d9; background: linear-gradient(160deg, #101a3d 0%, #0b1230 100%); }
body.theme-dark .ai-difference-card:nth-child(3) { border-top-color: #f97316; background: linear-gradient(160deg, #101a3d 0%, #1c0d00 100%); }
body.theme-dark .ai-difference-card .icon-mark,
body.theme-dark .ai-difference-card small { background: #172450 !important; color: #bcd2f2 !important; }
body.theme-dark .ai-card-stat { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.05); color:#5c6773; }
body.theme-dark .ai-difference-card:nth-child(1) .ai-card-stat { border-color: rgba(59,130,246,.2); background: rgba(59,130,246,.08); color: #93b4e9; }
body.theme-dark .ai-difference-card:nth-child(2) .ai-card-stat { border-color: rgba(66,116,217,.2); background: rgba(66,116,217,.08); color: #8fb0e8; }
body.theme-dark .ai-difference-card:nth-child(3) .ai-card-stat { border-color: rgba(249,115,22,.2); background: rgba(249,115,22,.08); color: #fdba74; }
body.theme-dark .ai-story-overlay h2,
body.theme-dark .ai-screen-bars strong,
body.theme-dark .tracking-flow h3,
body.theme-dark .audience-card h2 { color: #f8fafc !important; }
body.theme-dark .ai-screen-preview,
body.theme-dark .tracking-flow article,
body.theme-dark .audience-card { border-color: #2a3a70; background: #101a3d; box-shadow: none; }
body.theme-dark .audience-card > img    { border-color: #2a3a70; }
body.theme-dark .ai-screen-note         { border-color: #1b3168; background: #0b1230; }
body.theme-dark .ai-screen-bars div     { border-color: #2a3a70; background: #0d1330; }
body.theme-dark .ai-screen-preview-head { border-color: #2a3a70; }
body.theme-dark .ai-story-lead,
body.theme-dark .ai-screen-note p,
body.theme-dark .tracking-flow p,
body.theme-dark .audience-card ul { color: #cbd5e1 !important; }
body.theme-dark .audience-card li::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23251c47' stroke='%23382a66'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%23a78bfa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.theme-dark .tracking-flow .flow-icon,
body.theme-dark .tracking-flow article > small { background: #172450 !important; color: #bcd2f2 !important; }
body.theme-dark .testimonial-card       { border-color: #2a3a70; background: #101a3d; box-shadow: none; }
body.theme-dark .testimonial-quote      { color: #4274d9; }
body.theme-dark .testimonial-card p     { color: #cbd5e1; }
body.theme-dark .testimonial-stars      { color: #fbbf24; }
body.theme-dark .testimonial-footer     { border-color: #2a3a70; }
body.theme-dark .testimonial-footer strong { color: #f8fafc; }
body.theme-dark .testimonial-footer span   { color:#5c6773; }
body.theme-dark .testimonial-avatar { background: #172450; border-color: #2a3a70; color: #bcd2f2; }
body.theme-dark .home-stats-band { border-color: #2a3a70; background: linear-gradient(135deg, #172450, #052e2b) !important; }
body.theme-dark .home-stats-row > .stat { background: #101a3d !important; }
body.theme-dark .home-stats-row > .stat-value,
body.theme-dark .profile-box .stat-value { color: #f8fafc !important; }
body.theme-dark .journey-card  { border-color: #2a3a70 !important; background: #101a3d !important; color: #f8fafc !important; box-shadow: none !important; }
body.theme-dark .journey-card p { color: #cbd5e1 !important; }
body.theme-dark .about-panel  { border-color: #2a3a70; background: linear-gradient(135deg, #0d1330, #101a3d); }
body.theme-dark .about-panel p { color:#5c6773; }
body.theme-dark .about-chip   { border-color: #2a3a70; background: #172450; color: #bcd2f2; }
body.theme-dark .about-metric { border-color: #2a3a70; background: #101a3d; }
body.theme-dark .about-metric strong { color: #f8fafc; }
body.theme-dark .about-metric span   { color:#5c6773; }
body.theme-dark .footer {
    border-color: #2a3a70;
    background: linear-gradient(180deg, #0a0718 0%, #070c1e 100%);
}
body.theme-dark .footer-about p  { color:#5c6773; }
body.theme-dark .footer-links    { color: #cbd5e1; }
body.theme-dark .footer-links a  { color:#5c6773; }
body.theme-dark .footer-links a:hover  { color: #6693e0; }
body.theme-dark .footer-links strong   { color: #f8fafc; }
body.theme-dark .footer-bottom   { border-color: #2a3a70; }
body.theme-dark .footer-bottom .tiny   { color:#5c6773; }
body.theme-dark .social-dot      { background: #2a3a70; color: #bcd2f2; box-shadow: none; }
body.theme-dark .social-dot:hover { background: #4274d9; color: #fff; }

/* ── 27. Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
    .featured-jobs-row { flex-wrap: wrap !important; }
    .featured-job-slot { flex: 1 1 calc(50% - 28px) !important; max-width: 520px !important; }
    .tracking-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tracking-flow article::after { display: none; }
}
@media (max-width: 1024px) {
    .home-page .hero {
        padding: 40px 0 36px !important;
        min-height: auto !important;
    }
    .hero-copy-grid { grid-template-columns: 1fr !important; }
    .hero-copy-grid > .hero-copy { text-align: center; }
    .hero-copy-grid h1,
    .hero-copy-grid .lead,
    .hero-copy-grid .search { margin-left: auto !important; margin-right: auto !important; }
    .hero-copy-grid .hero-actions { justify-content: center; }
    .home-paths { margin-left: auto; margin-right: auto; }
    .hero-photo-card,
    .hero-photo-card img { min-height: 280px; max-height: 380px; }
    .hero-photo-card { margin-top: 24px; }
    .hero-chip { display: none; }
    .ai-difference-grid { grid-template-columns: 1fr 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; min-height: auto; }
    .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .audience-grid { grid-template-columns: 1fr; }
    .ai-story-stage { overflow: hidden; border-radius: 20px; }
    .ai-story-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .ai-story-stage::before {
        border-radius: 0;
        background: rgba(11, 8, 30, .78);
    }
    .ai-story-overlay {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: auto;
        padding: 26px 20px 0;
    }
    .ai-story-stage .ai-screen-preview {
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        width: auto;
        margin: 20px 20px 24px;
    }
    .ai-difference-grid { grid-template-columns: 1fr; }
    .home-cta-band { padding: 44px 0; }
    .home-cta-inner { grid-template-columns: 1fr; text-align: center; }
    .home-cta-copy .eyebrow { margin-left: auto !important; margin-right: auto !important; }
    .home-cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; }
    .home-cta-actions .btn { flex: 1 1 160px; }
    .tracking-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tracking-flow article:nth-child(3)::after { display: none; }
}
@media (max-width: 760px) {
    .home-page .hero { display: block !important; min-height: auto !important; }
    .hero-copy-grid { grid-template-columns: 1fr !important; }
    .hero-photo-card { margin-top: 24px; }
    .hero-chip { display: none; }
    .journey-grid { grid-template-columns: 1fr 1fr; }
    .home-stats-band { padding-top: 34px !important; padding-bottom: 34px !important; }
    .home-stats-row { grid-template-columns: 1fr !important; }
    .home-stats-row > .stat { justify-content: flex-start; min-height: 0; padding: 18px !important; }
    .home-stats-row > .stat-value { font-size: 34px !important; }
    .tracking-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tracking-flow article:nth-child(2)::after,
    .tracking-flow article:nth-child(4)::after { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 28px; padding-top: 18px; }
    .footer-links { font-size: 15px; }
    .footer-links strong { font-size: 18px; }
    .social-dot { width: 50px; height: 50px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .home-page .hero { padding: 28px 0 32px !important; }
    .home-page h1,
    .hero-copy-grid h1 { font-size: 36px !important; }
    .home-page .section,
    .home-page .ai-difference-section,
    .home-page .ai-screening-story,
    .home-page .tracking-flow-section,
    .home-page .audience-section,
    .home-page .career-potential,
    .home-page .home-stats-band,
    .home-page .home-testimonials,
    .home-page .home-featured-jobs { padding-top: 28px !important; padding-bottom: 28px !important; }
    .home-page .search { padding: 10px !important; }
    .home-page .search .btn { width: 100% !important; border-radius: 12px !important; }
    .home-page .search { flex-direction: column; }
    .home-page .search-inner { min-height: 44px !important; }
    .home-paths { grid-template-columns: 1fr; }
    .home-path-card { padding: 14px 36px 14px 14px; }
    .hero-photo-card,
    .hero-photo-card img { min-height: 200px; max-height: 280px; }
    .hero-photo-card figcaption { left: 12px; right: 12px; bottom: 12px; padding: 12px; }
    .ai-screening-story { padding-top: 12px !important; }
    .ai-difference-grid { grid-template-columns: 1fr; }
    .ai-difference-copy h2 { font-size: 28px !important; }
    .ai-difference-copy p { font-size: 15px; }
    .ai-screen-preview-head { align-items: flex-start; flex-direction: column; }
    .ai-screen-preview-head strong { font-size: 44px; }
    .tracking-flow { grid-template-columns: 1fr; }
    .tracking-flow article::after { display: none; }
    .audience-card { padding: 20px; }
    .audience-card > img { height: 210px; }
    .audience-card h2 { font-size: 24px !important; }
    .audience-cta .btn { flex: 1 1 100%; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .home-testimonials { padding-top: 18px !important; }
    .featured-jobs-row { display: grid !important; grid-template-columns: 1fr !important; }
    .featured-job-slot { max-width: none !important; width: 100% !important; }
    .journey-grid { grid-template-columns: 1fr; }
    .home-cta-band { padding: 32px 0; }
    .home-cta-copy p { font-size: 15px; }
    .footer { padding-bottom: 36px; }
}
@media (max-width: 420px) {
    .home-page h1,
    .hero-copy-grid h1 { font-size: 30px !important; }
    .home-page .lead { font-size: 15px !important; }
    .home-page .hero-copy:before,
    .home-page .eyebrow          { font-size: 13px !important; letter-spacing: .16em !important; }
    .ai-difference-card { padding: 16px; }
    .ai-difference-card h3 { font-size: 16px; }
    .ai-screen-preview-head strong { font-size: 36px; }
    .audience-card h2 { font-size: 22px !important; }
    .audience-card > img { height: 180px; }
    .testimonial-card { padding: 18px; }
    .home-cta-actions .btn { flex: 1 1 100%; }
}

/* ── Companies listing: richer company cards ───────────────── */
.company-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.company-card:hover {
    transform: translateY(-4px);
    border-color: #b7cef2;
    box-shadow: 0 18px 44px rgba(66,116,217, .14);
}
.company-card-head { display: flex; align-items: center; gap: 14px; }
.company-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid #d5e3f7;
    background: #eef4fc;
}
span.company-logo.profile-photo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2d51a8;
    font-size: 22px;
    font-weight: 900;
}
.company-head-text { min-width: 0; }
.company-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    line-height: 1.25;
}
.company-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #d5e3f7;
    color: #1b3168;
    font-size: 11px;
    font-weight: 900;
}
.company-industry { margin: 3px 0 0; color: #3a67cf; font-size: 13px; font-weight: 800; }
.company-meta { color: #64748b; font-size: 14px; font-weight: 600; }
.company-desc { margin: 0; color: #475467; font-size: 14px; line-height: 1.6; }
.company-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}
.company-jobs-pill {
    border-radius: 999px;
    background: #dce8f9;
    padding: 7px 14px;
    color: #2d51a8;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.company-card-footer .btn { white-space: nowrap; }

/* Responsive companies grid: fluid 3 → 2 → 1 columns (mirrors the jobs grid).
   Overrides the generic base.css .grid3 rule that jumps straight to 1 column. */
.section .grid.grid3:has(.company-card) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.section .grid.grid3:has(.company-card) > .company-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
@media (min-width: 1100px) {
    .section .grid.grid3:has(.company-card) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .section .grid.grid3:has(.company-card) {
        grid-template-columns: 1fr !important;
    }
    .company-card { padding: 18px; }
    .company-card-footer { flex-wrap: wrap; }
    .company-card-footer .btn { flex: 1 1 100%; }
    .company-jobs-pill { flex: 0 0 auto; }
}

body.theme-dark .company-card { border-color: #2a3a70; background: #101a3d; }
body.theme-dark .company-card:hover { border-color: #345aa8; }
body.theme-dark .company-logo { border-color: #2a3a70; background: #152249; }
body.theme-dark span.company-logo.profile-photo-fallback { color: #93b4e9; }
body.theme-dark .company-industry { color: #93b4e9; }
body.theme-dark .company-meta { color:#5c6773; }
body.theme-dark .company-desc { color: #cbd5e1; }
body.theme-dark .company-jobs-pill { background: #182550; color: #93b4e9; }
body.theme-dark .company-verified { background: rgba(22, 101, 52, .35); color: #8fb0e8; }

/* ── Homepage: role browsing + CV builder band ──────────────────────────── */
.home-roles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.home-role-chip{display:inline-flex;align-items:center;border:1px solid #dfe9f6;border-radius:999px;background:#fff;
    padding:10px 18px;color:#334155;font-size:14.5px;font-weight:800;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
.home-role-chip:hover{transform:translateY(-2px);border-color:#bcd2f2;color:#2d51a8;box-shadow:0 10px 24px rgba(15,23,42,.07)}
.home-role-chip--all{background:#eef4fc;border-color:#bcd2f2;color:#2d51a8}
.home-role-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:9px;padding:0 6px;border-radius:999px;background:#eef4fc;color:#2d51a8;font-size:12px;font-weight:950}
[dir="rtl"] .home-role-count{margin-left:0;margin-right:9px}
.home-role-chip:hover .home-role-count{background:#dce8f9}
body.theme-dark .home-role-count{background:#172450;color:#bcd2f2}

.home-cv-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;
    border:1px solid #dfe9f6;border-radius:26px;padding:36px 40px;
    background:linear-gradient(135deg,#f6f9fe 0%,#fff 55%,#f0fdf4 100%);box-shadow:0 16px 44px rgba(15,23,42,.06)}
.home-cv-copy h2{font-size:clamp(24px,2.4vw,32px)}
.home-cv-copy p{margin-top:14px;color:#475569;font-size:16px;line-height:1.7;max-width:560px}
.home-cv-actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* The sheet is drawn in CSS rather than shipped as an image: it costs no
   request and stays sharp at any width. */
.home-cv-art{position:relative;display:flex;justify-content:center}
.home-cv-sheet{display:grid;gap:9px;width:100%;max-width:260px;border:1px solid #dfe9f6;border-radius:14px;
    background:#fff;padding:24px 22px;box-shadow:0 22px 52px rgba(66,116,217,.16);transform:rotate(-2deg)}
.home-cv-bar{height:15px;width:56%;border-radius:6px;background:#4274d9}
.home-cv-line{height:8px;border-radius:999px;background:#e8eef8}
.home-cv-line.w90{width:90%}.home-cv-line.w80{width:80%}.home-cv-line.w70{width:70%}.home-cv-line.w60{width:60%}
.home-cv-rule{height:2px;background:#dce8f9;margin:5px 0}
.home-cv-chips{display:flex;gap:7px}
.home-cv-chips i{width:46px;height:17px;border-radius:999px;background:#eef4fc}
.home-cv-badge{position:absolute;right:2%;bottom:-10px;border-radius:13px;background:#22c55e;color:#fff;
    padding:10px 16px;font-weight:950;font-size:14px;box-shadow:0 12px 26px rgba(34,197,94,.3)}

body.theme-dark .home-role-chip{border-color:#2a3a70;background:#101a3d;color:#cbd5e1}
body.theme-dark .home-role-chip--all{background:#172450;color:#bcd2f2}
body.theme-dark .home-cv-band{border-color:#2a3a70;background:linear-gradient(135deg,#132048,#101a3d 60%,#0f2a1e)}
body.theme-dark .home-cv-copy p{color:#cbd5e1}
body.theme-dark .home-cv-sheet{border-color:#2a3a70}
body.theme-dark .home-cv-line{background:#1e2a55}
body.theme-dark .home-cv-rule{background:#2a3a70}
body.theme-dark .home-cv-chips i{background:#172450}

@media(max-width:900px){
    .home-cv-band{grid-template-columns:1fr;gap:28px;padding:26px 22px}
    .home-cv-art{order:-1}
}