/* Base resets and typography */
:root {
  --primary-color: #03c4eb;
  --secondary-color: #ff6666;
  --dark-color: #111111;
  --light-color: #f8f9fa;
  --text-color: #555555;
  --heading-color: #222222;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container-max-width: 1320px;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 1320px 宽度统一规范 (从 CUSTOM_MODIFICATIONS.md 继承) */
@media (min-width: 1200px) {
  .container {
    width: 100% !important;
    max-width: var(--container-max-width) !important;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover, a:focus {
  text-decoration: none;
  color: var(--primary-color);
}

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

/* 辅助类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Permanent Hero Content Visibility */
#hero .slider-spinner {
  display: none !important;
}
#hero .hero__content .hero-large-text,
#hero .hero__content .hero-small-text,
.hero-large-text,
.hero-small-text {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  color: #ffffff !important;
}


    /* 1:1 Morphext flipInX 3D Animation */
    
.js-rotating {
  display: inline-block !important;
  perspective: 600px;
  vertical-align: baseline !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

    .js-rotating.animated {
      animation-duration: 0.9s;
      animation-fill-mode: both;
    }
    @keyframes flipInX {
      0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
      }
      40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
      }
      60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
      80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
      100% {
        transform: perspective(400px);
        opacity: 1;
      }
    }
    .flipInX {
      backface-visibility: visible !important;
      animation-name: flipInX;
    }