/* =========================================================
   ROKAB / 乐康步
   Main Website Styles
   ========================================================= */


/* =========================
   RESET
   ========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    Arial,
    sans-serif;

  color: #17253b;
  background: #ffffff;
  line-height: 1.7;
}

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

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

button {
  font-family: inherit;
}


/* =========================
   COMMON
   ========================= */

.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.section {
  padding: 110px 0;
}

.section.soft {
  background: #f5f8fc;
}

.section-label {
  margin-bottom: 18px;
  color: #5b769c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section h2 {
  margin: 0 0 25px;
  color: #17253b;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.25;
  font-weight: 700;
}

.section-lead {
  max-width: 760px;
  margin: 0 0 55px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.9;
}


/* =========================
   HEADER
   ========================= */

.site-header {
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #edf1f6;
}

.nav-wrap {
  width: min(1180px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.brand-cn {
  color: #17253b;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 1px;
}

.brand-en {
  color: #5b769c;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.desktop-nav a {
  position: relative;
  color: #34445c;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s ease;
}

.desktop-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: #294777;

  transition: width 0.25s ease;
}

.desktop-nav a:hover {
  color: #294777;
}

.desktop-nav a:hover::after {
  width: 100%;
}


/* =========================
   MOBILE MENU BUTTON
   ========================= */

.mobile-menu-button {
  display: none;

  width: 44px;
  height: 44px;

  padding: 8px;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.mobile-menu-button span {
  display: block;

  width: 25px;
  height: 2px;

  margin: 5px auto;

  background: #17253b;
}

.mobile-nav {
  display: none;
}


/* =========================
   HERO
   ========================= */

.hero {
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f7faff 0%,
      #ffffff 65%
    );
}

.hero-inner {
  width: min(1280px, calc(100% - 48px));

  min-height: 650px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  align-items: center;

  gap: 60px;
}

.hero-copy {
  padding: 70px 0;
}

.eyebrow {
  margin-bottom: 20px;

  color: #5b769c;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 2.5px;
}

.hero h1 {
  margin: 0 0 20px;

  color: #17253b;

  font-size: clamp(50px, 6vw, 78px);

  line-height: 1.12;

  font-weight: 800;

  letter-spacing: -2px;
}

.hero h2 {
  margin: 0 0 20px;

  color: #294777;

  font-size: 28px;
  line-height: 1.4;

  font-weight: 700;
}

.company {
  display: flex;

  flex-direction: column;

  gap: 3px;

  margin-bottom: 25px;
}

.company strong {
  color: #33445d;

  font-size: 16px;
}

.company span {
  color: #7a899d;

  font-size: 14px;
}

.lead {
  max-width: 610px;

  margin: 0 0 28px;

  color: #64748b;

  font-size: 17px;

  line-height: 1.9;
}

.tags {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 34px;
}

.tags span {
  padding: 7px 13px;

  border: 1px solid #dce5f0;

  border-radius: 30px;

  background: #ffffff;

  color: #53657e;

  font-size: 13px;
}

.buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 13px;
}

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 0 25px;

  border-radius: 8px;

  font-size: 15px;
  font-weight: 600;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: #294777;

  color: #ffffff;

  box-shadow:
    0 8px 22px rgba(41, 71, 119, 0.18);
}

.btn-primary:hover {
  background: #203b66;
}

.btn-outline {
  border: 1px solid #b8c7d9;

  background: #ffffff;

  color: #294777;
}

.btn-outline:hover {
  border-color: #294777;
}

.hero-visual {
  position: relative;

  width: 100%;

  height: 570px;

  overflow: hidden;

  border-radius: 20px;
}

.hero-visual img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: 46% center;
}


/* =========================
   FEATURE CARDS
   ========================= */

.feature-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}

.card {
  padding: 34px;

  background: #ffffff;

  border: 1px solid #e5ebf2;

  border-radius: 14px;

  box-shadow:
    0 8px 30px rgba(30, 55, 90, 0.05);
}

.number {
  display: block;

  margin-bottom: 20px;

  color: #6d86a8;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.card h3 {
  margin: 0 0 13px;

  color: #1c304b;

  font-size: 22px;
}

.card p {
  margin: 0;

  color: #6b7a8f;

  font-size: 15px;

  line-height: 1.8;
}


/* =========================
   SERVICES
   ========================= */

.service-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;
}

.service-card {
  min-height: 290px;

  padding: 30px;

  border: 1px solid #e4eaf1;

  border-radius: 14px;

  background: #ffffff;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 15px 35px rgba(30, 55, 90, 0.09);
}

.service-card > span {
  display: block;

  margin-bottom: 35px;

  color: #6d86a8;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.service-card h3 {
  margin: 0 0 13px;

  color: #1c304b;

  font-size: 21px;
}

.service-card p {
  margin: 0;

  color: #6b7a8f;

  font-size: 14px;

  line-height: 1.8;
}


/* =========================
   CTA
   ========================= */

.cta {
  padding: 90px 0;

  background: #294777;

  color: #ffffff;
}

.cta .container {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

.cta .section-label {
  margin-bottom: 12px;

  color: #b9cae0;
}

.cta h2 {
  margin: 0 0 12px;

  color: #ffffff;

  font-size: clamp(32px, 4vw, 48px);

  line-height: 1.3;
}

.cta p {
  max-width: 650px;

  margin: 0;

  color: #dce6f2;

  font-size: 16px;
}

.btn-white {
  flex-shrink: 0;

  background: #ffffff;

  color: #294777;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.12);
}

.btn-white:hover {
  background: #f4f7fb;
}


/* =========================
   FOOTER
   ========================= */

footer {
  padding: 35px 0;

  background: #111d2d;

  color: #aebdce;

  font-size: 13px;
}

.footer-inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.footer-brand {
  display: flex;

  align-items: baseline;

  gap: 10px;
}

.footer-brand strong {
  color: #ffffff;

  font-size: 18px;
}

.footer-brand span {
  color: #9dafc5;
}


/* =========================
   OTHER PAGE SUPPORT
   ========================= */

.page-hero {
  padding: 90px 0;

  background: #f5f8fc;
}

.page-hero h1 {
  margin: 0;

  color: #17253b;

  font-size: clamp(38px, 5vw, 60px);
}

.content-section {
  padding: 90px 0;
}

.content-section p {
  max-width: 800px;

  color: #66758a;

  line-height: 1.9;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1050px) {

  .desktop-nav {
    gap: 20px;
  }

  .hero-inner {
    grid-template-columns:
      1fr 1fr;

    gap: 35px;
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero-visual {
    height: 500px;
  }

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

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

  .container {
    width: min(100% - 34px, 600px);
  }

  .section {
    padding: 75px 0;
  }


  /* HEADER */

  .nav-wrap {
    width: calc(100% - 34px);

    min-height: 68px;
  }

  .brand-cn {
    font-size: 22px;
  }

  .brand-en {
    font-size: 15px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }

  .mobile-nav {
    display: none;

    padding: 8px 17px 18px;

    border-top: 1px solid #edf1f6;

    background: #ffffff;
  }

  .mobile-nav.active {
    display: flex;

    flex-direction: column;
  }

  .mobile-nav a {
    padding: 13px 0;

    border-bottom: 1px solid #edf1f6;

    color: #34445c;

    font-size: 15px;
  }


  /* HERO */

  .hero-inner {
    width: calc(100% - 34px);

    min-height: auto;

    display: flex;

    flex-direction: column;

    gap: 25px;
  }

  .hero-copy {
    width: 100%;

    padding: 65px 0 25px;
  }

  .eyebrow {
    margin-bottom: 15px;

    font-size: 11px;

    letter-spacing: 1.8px;
  }

  .hero h1 {
    margin-bottom: 17px;

    font-size: 49px;

    letter-spacing: -1px;
  }

  .hero h2 {
    margin-bottom: 17px;

    font-size: 23px;
  }

  .company {
    margin-bottom: 20px;
  }

  .company strong {
    font-size: 14px;
  }

  .company span {
    font-size: 13px;
  }

  .lead {
    margin-bottom: 22px;

    font-size: 15px;

    line-height: 1.85;
  }

  .tags {
    margin-bottom: 25px;

    gap: 7px;
  }

  .tags span {
    padding: 6px 10px;

    font-size: 12px;
  }

  .buttons {
    width: 100%;

    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-visual {
    height: 400px;

    border-radius: 15px;
  }

  .hero-visual img {
    object-position: 50% center;
  }


  /* SECTION */

  .section h2 {
    font-size: 35px;
  }

  .section-lead {
    font-size: 15px;

    line-height: 1.85;
  }


  /* CARDS */

  .feature-grid {
    grid-template-columns: 1fr;

    gap: 17px;
  }

  .card {
    padding: 27px;
  }

  .card h3 {
    font-size: 20px;
  }


  /* SERVICES */

  .service-grid {
    grid-template-columns: 1fr;

    gap: 17px;
  }

  .service-card {
    min-height: auto;

    padding: 27px;
  }

  .service-card > span {
    margin-bottom: 25px;
  }


  /* CTA */

  .cta {
    padding: 70px 0;
  }

  .cta .container {
    flex-direction: column;

    align-items: flex-start;
  }

  .cta h2 {
    font-size: 35px;
  }

  .cta p {
    font-size: 15px;

    line-height: 1.8;
  }

  .cta .btn {
    width: 100%;
  }


  /* FOOTER */

  footer {
    padding: 30px 0;
  }

  .footer-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
  }

  .footer-brand {
    flex-wrap: wrap;
  }

}


/* =========================
   SMALL PHONES
   ========================= */

@media (max-width: 380px) {

  .hero h1 {
    font-size: 43px;
  }

  .hero h2 {
    font-size: 21px;
  }

  .hero-visual {
    height: 350px;
  }

}
/* =========================
   DESKTOP HERO IMAGE
   完整显示图片，不裁切
   ========================= */

@media (min-width: 701px) {

  .hero-visual {
    height: auto;
    overflow: hidden;
    border-radius: 20px;
  }

  .hero-visual img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: contain;
    object-position: center center;
  }

}