/* Mobile & small tablet layout */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

@media (max-width: 768px) {
  .container {
    width: min(1180px, 100% - 24px);
  }

  /* ----- Header ----- */
  .header-top {
    grid-template-columns: 1fr auto;
    text-align: left;
    padding: 12px 0 10px;
    gap: 12px;
  }

  .brand {
    justify-content: flex-start;
    white-space: normal;
  }

  .brand__name {
    font-size: 1.1rem;
  }

  .header-contact {
    text-align: right;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .header-contact__group {
    justify-content: flex-end;
    margin-bottom: 0;
  }

  .wechat-qrcode {
    left: auto;
    right: 0;
    transform: translateY(6px);
    width: min(156px, 72vw);
  }

  .header-contact__group--wechat:hover .wechat-qrcode,
  .header-contact__group--wechat.is-open .wechat-qrcode {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ----- Nav: horizontal scroll ----- */
  .main-nav .container.main-nav__inner {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 4px;
  }

  .main-nav__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }

  .main-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    flex: 0 0 auto;
    padding: 12px 13px;
    font-size: 0.88rem;
  }

  /* ----- Hero ----- */
  .hero {
    min-height: min(26vh, 180px);
  }

  /* ----- Feature strip: keep 3 columns, scale down ----- */
  .feature-strip {
    margin-top: 0;
    padding: 28px 0 36px;
  }

  .feature-strip .container {
    width: min(1180px, 100% - 16px);
  }

  .feature-strip__title {
    font-size: 1.45rem;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
  }

  .feature-grid,
  .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 2vw, 10px);
  }

  .case-grid {
    align-items: stretch;
  }

  .feature-card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

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

  .feature-card__art {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .feature-card__foot {
    padding: clamp(6px, 2vw, 10px) clamp(5px, 1.6vw, 8px);
    gap: 4px;
  }

  .feature-card__title {
    font-size: clamp(0.62rem, 2.75vw, 0.78rem);
    line-height: 1.25;
    font-weight: 700;
  }

  .feature-card__link {
    width: clamp(24px, 7vw, 30px);
    height: clamp(24px, 7vw, 30px);
    font-size: clamp(0.58rem, 2.2vw, 0.68rem);
    border-width: 1px;
  }

  .case-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 6px;
  }

  .case-card__art {
    flex-shrink: 0;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .case-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(8px, 2.2vw, 12px) clamp(7px, 2vw, 10px) clamp(10px, 2.5vw, 14px);
    min-height: 0;
  }

  .case-card__tag {
    margin-bottom: 4px;
    font-size: clamp(0.5rem, 2vw, 0.62rem);
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }

  .case-card__title {
    margin-bottom: 5px;
    font-size: clamp(0.62rem, 2.6vw, 0.75rem);
    line-height: 1.35;
    flex-shrink: 0;
  }

  .case-card__desc {
    flex: 1;
    margin: 0;
    font-size: clamp(0.55rem, 2.2vw, 0.65rem);
    line-height: 1.5;
    overflow: visible;
    display: block;
    word-break: break-word;
  }

  /* ----- Core advantages & cases ----- */
  .core-advantages {
    margin-top: 0;
    padding: 28px 0 32px;
  }

  .core-advantages__title,
  .case-showcase__title {
    font-size: 1.4rem;
    margin-bottom: 22px;
    letter-spacing: 0.06em;
  }

  .core-advantages + .case-showcase {
    margin-top: 0;
    padding-bottom: 36px;
  }

  .case-showcase__title-deco {
    max-width: 48px;
  }

  .advantage-item {
    padding: 4px 8px 0;
  }

  .advantage-item__icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    margin-bottom: 12px;
  }

  .advantage-item__title {
    font-size: 1.05rem;
  }

  .advantage-item__desc {
    font-size: 0.84rem;
    line-height: 1.65;
  }

  /* ----- Footer: keep 3 columns, scale down ----- */
  .site-footer-panel {
    padding: 36px 0 16px;
  }

  .site-footer-panel .container {
    width: min(1180px, 100% - 16px);
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 18px);
    justify-items: center;
  }

  .footer-col {
    min-width: 0;
    width: 100%;
  }

  .footer-col__title {
    font-size: clamp(0.72rem, 2.9vw, 0.95rem);
    margin-bottom: clamp(6px, 2vw, 10px);
    line-height: 1.3;
  }

  .footer-links {
    gap: clamp(4px, 1.5vw, 8px);
  }

  .footer-links a {
    font-size: clamp(0.6rem, 2.35vw, 0.75rem);
    line-height: 1.45;
    word-break: keep-all;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .footer-copy {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.65;
    word-break: break-word;
  }

  .footer-bottom__links {
    justify-content: center;
    margin-left: 0;
    align-self: center;
    gap: 20px;
  }

  /* ----- Subpages (inline-style pages) ----- */
  header.hero {
    padding: 36px 0 28px !important;
  }

  header.hero h1 {
    font-size: 1.5rem !important;
    line-height: 1.35;
  }

  header.hero p {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .services,
  .countries {
    padding: 24px 0 36px !important;
    gap: 14px !important;
  }

  .service-card,
  .country-card {
    padding: 14px !important;
  }

  .service-card h2,
  .country-card h2 {
    font-size: 1.05rem !important;
  }

  .section {
    padding: 24px 0 !important;
  }

  .section h2 {
    font-size: 1.3rem !important;
  }

  .about-card,
  .team-card {
    padding: 14px !important;
  }

  .team-card h3 {
    font-size: 1.05rem !important;
  }

  .highlight {
    font-size: 0.9rem;
    padding: 12px 14px;
  }

  .actions {
    padding-bottom: 32px !important;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(1180px, 100% - 20px);
  }

  .main-nav a {
    padding: 11px 11px;
    font-size: 0.84rem;
  }

  .feature-strip__title,
  .core-advantages__title,
  .case-showcase__title {
    font-size: 1.28rem;
  }

  .feature-grid,
  .case-grid {
    gap: 5px;
  }

  .footer-grid {
    gap: 8px;
  }

  .footer-col__title {
    font-size: clamp(0.66rem, 2.7vw, 0.88rem);
  }

  .footer-links a {
    font-size: clamp(0.56rem, 2.2vw, 0.68rem);
  }

  .feature-card__title {
    font-size: clamp(0.58rem, 2.6vw, 0.72rem);
  }

  .feature-card__link {
    width: 22px;
    height: 22px;
    font-size: 0.55rem;
  }

  .case-card__art {
    aspect-ratio: 5 / 3;
  }

  .case-card__body {
    padding-bottom: 12px;
  }

  .footer-bottom__links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@supports (padding: max(0px)) {
  .site-header,
  .main-nav,
  .site-footer-panel {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}