/* ============================================================================
   HOME PAGE V2 — every rule scoped under .cwf-home (except the Trusted-By
   section, which sits just above that wrapper in index.blade.php and is
   scoped to .tb- class names instead; still namespaced, still isolated).

   Fonts: Plus Jakarta Sans (headings), Inter (body) -- loaded via <link> in
   index.blade.php. Brand accents: Google 4-color (blue/red/yellow/green),
   same hex values used everywhere else in this project.
   ========================================================================= */

.cwf-home, .tb-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #191B22;
    background: #F9F9FF;
}
.cwf-home__headline, .fc-card__name, .fj-card__title, .rc-card__name, .ja-headline {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.cwf-home__container { max-width: 1320px; margin: 0 auto; padding: 72px 32px; }
.cwf-home__header { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.cwf-home__header--split { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; max-width: none; gap: 24px; flex-wrap: wrap; }
.cwf-home__kicker {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 12px;
}
.cwf-home__kicker--blue   { color: #4285F4; }
.cwf-home__kicker--red    { color: #EA4335; }
.cwf-home__kicker--yellow { color: #B58500; }
.cwf-home__kicker--green  { color: #34A853; }
.cwf-home__headline { font-size: clamp(1.6rem, 2.4vw, 2.25rem); font-weight: 700; margin-bottom: 10px; }
.cwf-home__subtitle { font-size: 16px; color: #424753; line-height: 1.6; margin: 0; }
.cwf-home__cta { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; color: #4285F4; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cwf-home__cta:hover { text-decoration: underline; color: #4285F4; }
.cwf-home__btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px;
    padding: 14px 30px; border-radius: 999px; text-decoration: none;
}
.cwf-home__btn--primary { background: #4285F4; color: #fff; box-shadow: 0 8px 20px rgba(66,133,244,.3); }
.cwf-home__btn--primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(66,133,244,.4); }
.cwf-home__btn--outline { background: #fff; color: #191B22; border: 1.5px solid #C2C6D5; }
.cwf-home__btn--outline:hover { color: #4285F4; border-color: #4285F4; }

/* -------------------------------------------------------------- TRUSTED BY */
.tb-section { padding: 56px 0; }
.tb-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; text-align: center; }
.tb-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #727785; }
.tb-marquee { overflow: hidden; margin-top: 28px; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.tb-track { display: flex; align-items: center; gap: 80px; width: max-content; animation: tb-scroll 30s linear infinite; }
.tb-marquee:hover .tb-track { animation-play-state: paused; }
.tb-item { display: inline-flex; align-items: center; justify-content: center; height: 160px; opacity: .8; transition: opacity .2s ease, transform .3s ease; text-decoration: none; }
.tb-item:hover { opacity: 1; transform: scale(1.15); }
/* Reference spec: h-40 (160px), max-w-[320px], object-contain -- our logos
   are placed at that same fixed height so every partner reads at the same
   visual weight regardless of its own image's native size. */
.tb-item img { height: 160px; max-width: 320px; object-fit: contain; }
.tb-name { font-size: 20px; font-weight: 700; color: #424753; white-space: nowrap; }
@keyframes tb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tb-track { animation: none; } }

/* --------------------------------------------------------- FEATURED CANDIDATES */
.fc-section { background: #fff; }
.fc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 24px; padding-top: 56px; }
.fc-card-wrap { position: relative; padding-top: 56px; }
.fc-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #F2F3FD; border: 1px solid #ECEDF7; border-radius: 28px;
    padding: 60px 20px 24px;
    text-decoration: none; color: inherit;
    box-shadow: 0 10px 26px rgba(25,27,34,.06);
    transition: box-shadow .25s ease, transform .25s ease;
}
.fc-card:hover { box-shadow: 0 20px 40px rgba(25,27,34,.14); transform: translateY(-4px); text-decoration: none; color: inherit; }
.fc-card__photo {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 104px; height: 120px; border-radius: 20px; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 10px 20px rgba(25,27,34,.15);
    background: #fff;
}
.fc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.fc-card__flag { position: absolute; top: -62px; left: calc(50% - 58px); width: 38px; height: 30px; border-radius: 6px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); z-index: 2; }
.fc-card__flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-card__badge { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #4285F4; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.fc-card__name { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.fc-card__title { font-size: 13px; color: #424753; margin-top: 4px; }
.fc-card__badges { display: flex; gap: 10px; margin-top: 14px; }
.fc-mini-badge { width: 30px; height: 30px; border-radius: 50%; background: #191B22; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }

/* --------------------------------------------------------------- FLAG GRIDS */
.flag-grid { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 767px) {
    .flag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-items: center; }
    .flag-grid .flag-card { width: 100%; max-width: none; }
}
.flag-card {
    flex: 1 1 200px; max-width: 240px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    background: #fff; border: 1px solid #ECEDF7; border-radius: 24px;
    padding: 22px 18px; text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.flag-card:hover { box-shadow: 0 14px 30px rgba(25,27,34,.1); transform: translateY(-3px); text-decoration: none; color: inherit; }
.flag-card__flag { display: block; width: 96px; height: 64px; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(25,27,34,.15); }
.flag-card__flag img { width: 100%; height: 100%; object-fit: cover; }
.flag-card__name { font-weight: 700; font-size: 15px; }
.flag-card__count { font-size: 12px; color: #727785; }

/* Waving-flag animation -- same transform values used everywhere a flag appears */
.flag-wave, .fc-card__flag { animation: cwf-wave 2.4s ease-in-out infinite; transform-origin: bottom; }
@keyframes cwf-wave {
    0%, 100% { transform: rotate(0deg) skewY(0deg); }
    25% { transform: rotate(3deg) skewY(-3deg); }
    75% { transform: rotate(-2deg) skewY(4deg); }
}
@media (prefers-reduced-motion: reduce) { .flag-wave, .fc-card__flag { animation: none; } }

/* ---------------------------------------------------------------- CATEGORY BENTO */
.cat-section { background: #fff; padding-bottom: 72px; }
.cat-section .cwf-home__container { padding-bottom: 0; }
.cat-empty { text-align: center; color: #727785; font-size: 15px; padding: 24px 0 8px; }
/* Full-bleed horizontal marquee, same continuous-scroll pattern as the
   Trusted-By logo strip and the About page's Industries We Serve --
   single row, auto-scrolling, pauses on hover. The track is rendered
   twice in the Blade file for a seamless loop; do not de-duplicate. */
.cat-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); }
.cat-track { display: flex; gap: 16px; width: max-content; animation: cat-scroll 40s linear infinite; padding: 0 32px; }
.cat-marquee:hover .cat-track { animation-play-state: paused; }
@keyframes cat-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cat-track { animation: none; } }
.cat-tile {
    position: relative; display: block; flex: 0 0 260px; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
    background-color: #ECEDF7; background-image: var(--bg-image); background-size: cover; background-position: center;
    text-decoration: none;
}
.cat-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 60%); }
.cat-tile__body { position: absolute; left: 16px; right: 16px; bottom: 16px; color: #fff; }
.cat-tile__name { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; }
.cat-tile__count { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
@media (max-width: 576px) {
    .cat-tile { flex-basis: 200px; }
}

/* ------------------------------------------------------------- FEATURED JOBS */
.fj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fj-card { background: #fff; border-radius: 18px; border: 1px solid #ECEDF7; border-top: 4px solid; padding: 22px; box-shadow: 0 8px 20px rgba(25,27,34,.05); transition: box-shadow .2s ease, transform .2s ease; }
.fj-card:hover { box-shadow: 0 16px 32px rgba(25,27,34,.12); transform: translateY(-3px); }
.fj-card--blue   { border-top-color: #4285F4; }
.fj-card--red    { border-top-color: #EA4335; }
.fj-card--yellow { border-top-color: #FBBC05; }
.fj-card--green  { border-top-color: #34A853; }
.fj-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fj-card__logo { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: #F2F3FD; display: flex; align-items: center; justify-content: center; }
.fj-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.fj-card__loc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #727785; }
.fj-card__loc img { width: 20px; height: auto; border-radius: 2px; }
.fj-card__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.fj-card__salary { color: #34A853; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.fj-card__meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #424753; margin-bottom: 18px; }
.fj-card__meta i { color: #34A853; margin-right: 4px; }
.fj-card__cta { display: block; text-align: center; border: 1.5px solid #4285F4; color: #4285F4; border-radius: 999px; padding: 11px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.fj-card__cta:hover { background: #4285F4; color: #fff; }

/* ---------------------------------------------------------------- ROLE CAROUSEL */
.rc-section { background: #fff; }
.rc-rail-wrap { position: relative; }
.rc-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rc-rail::-webkit-scrollbar { display: none; }
.rc-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid #C2C6D5; background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 6px 16px rgba(25,27,34,.12);
}
.rc-arrow--prev { left: -8px; }
.rc-arrow--next { right: -8px; }
.rc-card {
    position: relative; scroll-snap-align: start; flex: 0 0 260px;
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(249,249,255,.9); border: 1px solid #ECEDF7; border-radius: 20px;
    padding: 22px 18px; text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.rc-card:hover { box-shadow: 0 16px 32px rgba(25,27,34,.12); transform: translateY(-4px); text-decoration: none; color: inherit; }
.rc-card__bar { position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 20px 20px 0 0; }
.rc-card--blue   .rc-card__bar { background: #4285F4; }
.rc-card--red    .rc-card__bar { background: #EA4335; }
.rc-card--yellow .rc-card__bar { background: #FBBC05; }
.rc-card--green  .rc-card__bar { background: #34A853; }
.rc-card__icon { width: 38px; height: 38px; border-radius: 50%; background: #ECEDF7; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-top: 4px; }
.rc-card--blue   .rc-card__icon { color: #4285F4; }
.rc-card--red    .rc-card__icon { color: #EA4335; }
.rc-card--yellow .rc-card__icon { color: #B58500; }
.rc-card--green  .rc-card__icon { color: #34A853; }
.rc-card__name { font-weight: 700; font-size: 16px; }
.rc-card__desc { font-size: 13px; color: #424753; line-height: 1.45; flex: 1; }
.rc-card__cta { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rc-card--blue   .rc-card__cta { color: #4285F4; }
.rc-card--red    .rc-card__cta { color: #EA4335; }
.rc-card--yellow .rc-card__cta { color: #B58500; }
.rc-card--green  .rc-card__cta { color: #34A853; }

/* --------------------------------------------------------------- BILINGUAL CV */
.cv2-section { background: #F2F3FD; padding: 72px 0; }
.cv2-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding: 0 32px; max-width: 1320px; margin: 0 auto; }
.cv2-chip { display: inline-block; font-size: 13px; font-weight: 700; color: #B58500; background: rgba(251,188,5,.12); border: 1px solid rgba(251,188,5,.25); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.cv2-langs { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 26px; }
.cv2-langs span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #424753; }
.cv2-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cv2-right { display: flex; flex-direction: column; gap: 16px; }
.cv2-pill { display: flex; align-items: flex-start; gap: 14px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); border-radius: 999px; padding: 16px 22px; font-size: 13px; color: #424753; line-height: 1.4; }
.cv2-pill strong { color: #191B22; font-size: 14px; }
.cv2-pill__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: #4285F4; font-size: 16px; }
.cv2-pill--float { animation: cv2-float 6s ease-in-out infinite; }
@keyframes cv2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .cv2-pill--float { animation: none; } }
@media (max-width: 991px) { .cv2-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ JOB ALERTS */
.ja-section { background: #4285F4; padding: 72px 0; }
.ja-inner { max-width: 720px; margin: 0 auto; padding: 0 32px; text-align: center; }
.ja-chip { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.15); padding: 6px 16px; border-radius: 999px; margin-bottom: 16px; }
.ja-headline { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; margin-bottom: 12px; }
.ja-subtitle { color: rgba(255,255,255,.85); margin-bottom: 28px; }
.ja-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ja-input { flex: 1 1 320px; max-width: 380px; border: none; border-radius: 999px; padding: 15px 22px; font-size: 15px; }
.ja-btn { border: none; border-radius: 999px; padding: 15px 30px; background: #FBBC05; color: #1a1a1a; font-weight: 700; font-size: 15px; cursor: pointer; }
.ja-btn:hover { filter: brightness(1.05); }

@media (max-width: 991px) {
    .fc-grid, .fj-grid { grid-template-columns: repeat(2, 1fr); }
    .cwf-home__container { padding: 48px 20px; }
}
@media (max-width: 576px) {
    .fc-grid, .fj-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- AI SPOTLIGHT (reused) */
/* about-page.css's .cwf-reveal starts at opacity:0 until about-page.js's
   scroll IntersectionObserver adds .is-visible -- that script isn't loaded
   on this page (its globe/fan-deck/modal code doesn't apply here), so force
   the reused section's content visible immediately instead of porting the
   observer over for one section. */
.cwf-home .cwf-about .cwf-reveal {
    opacity: 1 !important;
    transform: none !important;
}