/* iOS inspired UI refresh shared by the 15 static sites. */
:root {
  color-scheme: light;
  --ios-bg: #f5f5f7;
  --ios-surface: rgba(255, 255, 255, 0.86);
  --ios-surface-solid: #ffffff;
  --ios-surface-alt: #fbfbfd;
  --ios-text: #1d1d1f;
  --ios-text-2: #515154;
  --ios-text-3: #86868b;
  --ios-border: rgba(60, 60, 67, 0.16);
  --ios-blue: #007aff;
  --ios-blue-2: #0a84ff;
  --ios-green: #34c759;
  --ios-orange: #ff9f0a;
  --ios-red: #ff3b30;
  --ios-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
  --ios-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
  --ios-radius: 18px;
  --ios-radius-sm: 12px;
  --ios-nav-h: 68px;
}

html {
  scroll-behavior: smooth;
  background: var(--ios-bg);
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(0, 122, 255, 0.10), transparent 30rem),
    radial-gradient(circle at 95% 8%, rgba(52, 199, 89, 0.08), transparent 28rem),
    var(--ios-bg) !important;
  color: var(--ios-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  letter-spacing: 0 !important;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

body :is(.nav, .navbar, .site-nav, .site-header, header.nav, #main-nav) {
  min-height: var(--ios-nav-h);
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid var(--ios-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

body :is(.nav-inner, .navbar .nav-inner, .site-nav .nav-inner) {
  min-height: var(--ios-nav-h);
  max-width: 1180px;
  padding-inline: 20px !important;
}

body :is(.nav-logo, .navbar .nav-logo, .site-nav .nav-logo) {
  color: var(--ios-text) !important;
  font-weight: 700 !important;
}

body :is(.nav-logo img, .footer-logo img) {
  border-radius: 8px;
}

body :is(.nav-links, .nav-links a, .nav-links li a) {
  color: var(--ios-text-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body :is(.nav-links a:hover, .nav-links li a:hover, .nav-links a.active, .nav-links li a.active) {
  color: var(--ios-blue) !important;
}

body :is(.nav-cta, .nav-phone, .btn, .button, button:not(.nav-toggle):not(.nav-mobile-toggle), input[type="submit"], .cta-button, .pkg-cta, .pricing-btn) {
  min-height: 40px;
  border: 1px solid rgba(0, 122, 255, 0.24) !important;
  border-radius: 999px !important;
  background: var(--ios-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.22) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body :is(.btn-outline, .button-outline, .secondary, .btn-secondary, .tab-btn, .filter-btn, .chip) {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--ios-blue) !important;
  border: 1px solid var(--ios-border) !important;
  box-shadow: none !important;
}

body :is(.nav-cta, .nav-phone, .btn, .button, button:not(.nav-toggle):not(.nav-mobile-toggle), input[type="submit"], .cta-button, .pkg-cta, .pricing-btn):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 122, 255, 0.28) !important;
}

body :is(.hero, .hero-section, .page-hero) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 247, 0.88)),
    var(--ios-bg) !important;
  color: var(--ios-text) !important;
}

body .hero.ai-image-hero {
  background-image:
    linear-gradient(90deg, rgba(245, 245, 247, 0.96) 0%, rgba(245, 245, 247, 0.9) 42%, rgba(245, 245, 247, 0.28) 100%),
    var(--hero-image) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}

body .hero.ai-image-hero :is(.hero-eyebrow, .hero-title, .hero-subtitle, .hero-actions, .hero-stats) {
  opacity: 1 !important;
  animation: none !important;
}

body :is(.hero-inner, .hero-content) {
  max-width: 1180px;
}

body :is(.hero h1, .hero-title, .hero-name, h1) {
  color: var(--ios-text) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

body :is(.hero p, .hero-subtitle, .hero-desc, .section-subtitle, .section-desc) {
  color: var(--ios-text-2) !important;
}

body :is(.hero-eyebrow, .section-label, .tag, .badge, .chip, .article-tag, .case-industry) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(0, 122, 255, 0.10) !important;
  color: var(--ios-blue) !important;
  border: 1px solid rgba(0, 122, 255, 0.14) !important;
  font-weight: 700 !important;
}

body :is(section, .section) {
  background-color: transparent !important;
}

body :is(.card, .case-card, .case-card-bento-large, .case-card-bento-small, .service-card, .feature-card, .adv-card, .stat-card, .stat-item, .hero-stat, .price-card, .pricing-card, .package-card, .article-card, .faq-item, .process-card, .process-step, .step, .value-card, .contact-card, .contact-section, .info-card, .team-card, .metric-card, .geo-card, .platform-item, .problem-card, .solution-card, .pain-card, .benefit-card, .story-card, .result-card) {
  background: var(--ios-surface) !important;
  border: 1px solid var(--ios-border) !important;
  border-radius: var(--ios-radius) !important;
  box-shadow: var(--ios-shadow-soft) !important;
  color: var(--ios-text) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body :is(.card, .case-card, .case-card-bento-large, .case-card-bento-small, .service-card, .feature-card, .adv-card, .price-card, .pricing-card, .package-card, .article-card, .process-card, .process-step, .step, .value-card, .geo-card, .platform-item, .problem-card, .solution-card, .pain-card, .benefit-card, .story-card, .result-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--ios-shadow) !important;
}

body :is(.grid, .cards-grid, .case-grid, .cases-grid, .services-grid, .features-grid, .advantages-grid, .stats-grid, .pricing-grid, .article-grid, .platforms-grid, .problems-grid, .solutions-grid, .benefits-grid, .process-grid) {
  gap: 18px !important;
}

body :is(.section-title, h2) {
  color: var(--ios-text) !important;
  font-weight: 800 !important;
}

body :is(h3, .card-title, .case-title, .article-title) {
  color: var(--ios-text) !important;
  font-weight: 750 !important;
}

body :is(p, li, .card p, .case-result, .faq-a, .footer-desc) {
  color: var(--ios-text-2);
}

body :is(.stat-number, .stat-number-static, .hero-stat-num, .metric-number, .number, .stat-num, .case-stat-value, .metric-v, .metric-val, .pricing-price, strong) {
  color: var(--ios-blue) !important;
}

body :is(.faq-list, .faq-container) {
  display: grid;
  gap: 12px;
}

body .faq-item {
  overflow: hidden;
}

body :is(.faq-q, .faq-question) {
  color: var(--ios-text) !important;
  font-weight: 750 !important;
}

body :is(.faq-a, .faq-answer, .faq-a-inner) {
  color: var(--ios-text-2) !important;
}

body :is(input, textarea, select) {
  border: 1px solid var(--ios-border) !important;
  border-radius: var(--ios-radius-sm) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--ios-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body :is(input, textarea, select):focus {
  border-color: rgba(0, 122, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12) !important;
  outline: none !important;
}

body :is(table, .table, .price-table) {
  border-radius: var(--ios-radius) !important;
  overflow: hidden;
  border: 1px solid var(--ios-border) !important;
  box-shadow: var(--ios-shadow-soft) !important;
}

body :is(th, thead) {
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--ios-text) !important;
}

body :is(td, th) {
  border-color: var(--ios-border) !important;
}

body :is(.footer, .site-footer, footer) {
  background: #1d1d1f !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

body :is(.footer a, .site-footer a, footer a, .footer p, .site-footer p, footer p, .footer-copy) {
  color: rgba(255, 255, 255, 0.68) !important;
}

body :is(.footer-brand, .footer-col-title, .footer-column h4, .site-footer h3, .site-footer h4) {
  color: #fff !important;
}

body .nav-toggle,
body .nav-mobile-toggle {
  border-radius: 12px !important;
  border: 1px solid var(--ios-border) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--ios-text) !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body :is(.card, .case-card, .service-card, .feature-card, .price-card, .package-card, .article-card, .process-card, .value-card) {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
}

@media (max-width: 760px) {
  :root {
    --ios-nav-h: 60px;
    --ios-radius: 16px;
  }

  body {
    background: var(--ios-bg) !important;
    overflow-x: hidden !important;
  }

  body :is(.nav-inner, .navbar .nav-inner, .site-nav .nav-inner) {
    padding-inline: 14px !important;
    max-width: 100% !important;
  }

  body :is(.nav-links):not(.open):not(.active):not(.show) {
    display: none !important;
  }

  body :is(.nav-links.open, .nav-links.active, .nav-links.show) {
    position: absolute !important;
    top: calc(var(--ios-nav-h) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-shadow) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  body :is(.nav-links.open a, .nav-links.active a, .nav-links.show a) {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  body :is(.nav-phone) {
    display: none !important;
  }

  body :is(.nav-toggle, .nav-mobile-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  body :is(.hero, .hero-section, .page-hero) {
    padding-top: calc(var(--ios-nav-h) + 28px) !important;
    overflow: hidden !important;
  }

  body :is(.hero-content, .hero-inner) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body :is(.hero h1, .hero-title, .hero-name, h1) {
    font-size: clamp(32px, 10vw, 46px) !important;
    max-width: 100% !important;
  }

  body :is(.hero-subtitle, .hero-desc, .section-sub, .section-subtitle, .hero-actions, .hero-stats) {
    max-width: 100% !important;
  }

  body :is(.bg-glow, .hero-glow-follow) {
    display: none !important;
  }

  body :is(.case-card-bento-large, .case-card-bento-small, .geo-card, .team-card) {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body :is(.geo-card) {
    position: static !important;
  }

  body :is(.hero-stats) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body :is(.hero-stat) {
    min-width: 0 !important;
    padding: 12px 8px !important;
  }

  body :is(.card, .case-card, .case-card-bento-large, .case-card-bento-small, .service-card, .feature-card, .adv-card, .price-card, .pricing-card, .package-card, .article-card, .faq-item, .process-card, .process-step, .step, .value-card, .stat-item, .hero-stat, .geo-card, .platform-item, .problem-card, .solution-card, .pain-card, .benefit-card, .story-card, .result-card) {
    border-radius: 16px !important;
  }
}