/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ============================================
   全局重置和基础样式
   ============================================ */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Header导航链接颜色 - 精确匹配原网站 */
/* 移除全局样式，只在组件中定义 */

/* All Jobs按钮颜色 */
.jobs {
  color: rgb(25, 20, 20) !important;
}

/* 全局黑色背景和白色文字 */
body {
  font-family: "Circular", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #FFFFFF;
  background: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 卡片内的文字应该是黑色 */
.card, [class*="card"] {
  color: #000000;
}

.card h1, .card h2, .card h3, .card h4, .card p, .card span,
[class*="card"] h1, [class*="card"] h2, [class*="card"] h3, [class*="card"] h4, 
[class*="card"] p, [class*="card"] span {
  color: #000000 !important;
}

/* 白色背景卡片内的文字 */
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, 
.bg-white p, .bg-white span {
  color: #000000 !important;
}

/* 深色背景卡片内的文字 */
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4,
.bg-black p, .bg-black span {
  color: #FFFFFF !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

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

/* ============================================
   工具类
   ============================================ */

.container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.block-container {
  width: 100%;
}

.fluidWidth {
  width: 100%;
}

/* 响应式可见性 */
.is-hidden-mobile {
  display: block;
}

.is-visible-mobile {
  display: none;
}

.is-hidden-desktop {
  display: none;
}

.is-visible-desktop {
  display: block;
}

@media (max-width: 767px) {
  .is-hidden-mobile {
    display: none !important;
  }
  
  .is-visible-mobile {
    display: block !important;
  }
  
  .is-hidden-desktop {
    display: block !important;
  }
  
  .is-visible-desktop {
    display: none !important;
  }
}

/* 间距工具类 */
.ma-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-xs { margin-bottom: 8px; }
.mb-s { margin-bottom: 16px; }
.mb-m { margin-bottom: 24px; }
.mb-l { margin-bottom: 32px; }
.mb-xl { margin-bottom: 48px; }
.mb-xxl { margin-bottom: 64px; }
.mb-xxxl { margin-bottom: 96px; }
.mt-m { margin-top: 24px; }
.mt-s { margin-top: 16px; }
.mt-xxl { margin-top: 64px; }
.mr-8 { margin-right: 8px; }
.mr-s { margin-right: 16px; }

@media (max-width: 767px) {
  .mb-mobile-0 { margin-bottom: 0; }
  .mb-mobile-xs { margin-bottom: 4px; }
  .mb-mobile-s { margin-bottom: 8px; }
  .mb-mobile-m { margin-bottom: 16px; }
  .mb-mobile-l { margin-bottom: 24px; }
  .mb-mobile-xl { margin-bottom: 32px; }
  .mb-mobile-xxl { margin-bottom: 48px; }
  .mt-mobile-s { margin-top: 8px; }
  .mt-mobile-l { margin-top: 24px; }
}

/* 圆角工具类 */
.rounded-24 {
  border-radius: 24px;
}

.rounded-16-mobile {
  @media (max-width: 767px) {
    border-radius: 16px;
  }
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

.text-center-mobile {
  @media (max-width: 767px) {
    text-align: center;
  }
}

/* 颜色工具类 */
.color-white { color: #FFFFFF; }
.color-black { color: #000000 !important; }
.color-ui-black { color: #000000; }
.color-black-active { color: #000000; }
.color-text-subdued { color: #888888; }

.bg-white { background-color: #FFFFFF; }
.bg-surface-blue { background-color: #E3F2FD; }
.bg-color-active { background-color: #F6F6F6; }
.bg-black { background-color: #000000; }

/* 显示工具类 */
.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none; }

/* Flexbox工具类 */
.gap-8 { gap: 8px; }
.vertical-center-children {
  display: flex;
  align-items: center;
}

.w-full { width: 100%; }
.w-fit { width: -moz-fit-content; width: fit-content; }

/* 链接样式 */
.no-underline {
  text-decoration: none;
}

/* 按钮重置 */
.clear-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}

/* 文字样式 */
.display-1 {
  font-size: 80px;
  line-height: 1.1;
  font-weight: 900;
}

.display-2 {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}

.headline-1 {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
}

.headline-2 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
}

.headline-3 {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 700;
}

.paragraph-2 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
}

.paragraph-3 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.body-1 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.body-2 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

.detail-2 {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-3 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}

.detail-4 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

/* 响应式文字大小 */
@media (max-width: 767px) {
  .display-1 { font-size: 48px; }
  .display-2 { font-size: 24px; }
  .headline-1 { font-size: 40px; }
  .headline-2 { font-size: 28px; }
  .headline-3 { font-size: 20px; }
  .paragraph-2 { font-size: 16px; }
  .paragraph-3 { font-size: 14px; }
}

/* 过渡效果 */
.overflow-hidden {
  overflow: hidden;
}

/* 位置 */
.p-relative {
  position: relative;
}

/* Grid系统 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-offset-3 {
  margin-left: 25%;
}

.col-offset-2 {
  margin-left: 16.666667%;
}

@media (max-width: 767px) {
  .col-12-mobile {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .col-offset-mobile-0 {
    margin-left: 0;
  }
  
  .col-offset-mobile-1 {
    margin-left: 8.333333%;
  }
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Swiper覆盖样式 */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hero轮播特定样式 */
.hero-carousel-container .swiper-slide {
  opacity: 0.6;
  transition: opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 470px;
  height: 470px;
}

.hero-carousel-container .swiper-slide-active {
  opacity: 1;
}

.hero-carousel-container .swiper-slide-prev,
.hero-carousel-container .swiper-slide-next {
  opacity: 0.4;
}

@media (max-width: 767px) {
  .hero-carousel-container .swiper-slide {
    width: 320px;
    height: 320px;
  }
}

/* Featured Jobs 特定样式 */
.swiper-wrapper {
  align-items: stretch;
}

/* 全局黑色背景和白色文字 */
main {
  background: #000000;
  color: #FFFFFF;
}

/* 所有section默认黑色背景 */
section {
  background: #000000;
  color: #FFFFFF;
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/styles/enhancements.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tabSection {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%) !important;
}

.card {
  border-radius: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}
@media (max-width: 767px) {
  .card {
    border-radius: 16px !important;
  }
}

.cityCard {
  padding: 14px 28px !important;
  font-weight: 600 !important;
  border-radius: 500px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.cityCard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.linkCard {
  border-radius: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.linkCard:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}
.linkCard:hover .arrow {
  transform: translateX(12px) !important;
}
@media (max-width: 767px) {
  .linkCard {
    border-radius: 16px !important;
  }
}

section[class*=featuredJobs], section[class*=locationScroll], section[class*=freshContent], section[class*=quickLinks] {
  padding: 160px 0 !important;
}
@media (max-width: 767px) {
  section[class*=featuredJobs], section[class*=locationScroll], section[class*=freshContent], section[class*=quickLinks] {
    padding: 80px 0 !important;
  }
}

h1, h2, h3 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

button {
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
button:hover {
  transform: scale(1.02) !important;
}
button:active {
  transform: scale(0.98) !important;
}

[class*=green],
.spotify-green {
  background-color: #1ED760 !important;
  color: #1ED760 !important;
}

[class*=surface-blue],
.bg-surface-blue {
  background-color: #E3F2FD !important;
}

.flipCard {
  perspective: 1200px !important;
}
.flipCard:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.flipCardInner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html {
  scroll-behavior: smooth !important;
}

img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

[role=tab] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[role=tab][aria-selected=true] {
  font-weight: 700 !important;
}

input, select, textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #1ED760 !important;
  outline-offset: 2px !important;
}

a {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
a:hover {
  opacity: 0.8 !important;
}

.navLink {
  position: relative !important;
}
.navLink::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: #1ED760 !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.navLink:hover::after, .navLink.active::after {
  width: 100% !important;
}

.mobileMenu {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mobileMenu.open {
  transform: translateX(0) !important;
}
.mobileMenu.closed {
  transform: translateX(100%) !important;
}

.footerRecord {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.footerRecord:hover {
  transform: rotate(180deg) !important;
}
.footerRecord.playing {
  animation: spin 3s linear infinite !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.waveBar {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.waveBar.playing {
  animation: wave 0.8s ease-in-out infinite !important;
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-in {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
  animation: loading 1.5s ease-in-out infinite !important;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  body {
    font-size: clamp(14px, 4vw, 16px) !important;
  }
}
.card,
.flipCard,
.cityCard,
.linkCard {
  will-change: transform !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
          backface-visibility: hidden !important;
}

*:focus-visible {
  outline: 2px solid #1ED760 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}