/* ============================================
   CRITICAL CONSTRAINTS - LOAD FIRST
   彻底约束系统 - 修复巨型图标与对齐问题
   ============================================ */

/* 1. 全局容器约束 - 黄金阅读宽度 */
.container,
.hero-content-wrapper,
.layout,
section > div:not(.hero-grid):not(.cities-grid):not(.step-card-grid) {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. 彻底约束所有图标 - 防止巨型圆圈 */
svg,
img,
.icon,
.feature-icon,
.step-icon,
.trust-item-icon,
.guide-only-label svg,
[class*="icon"] {
    max-width: 100% !important;
    height: auto !important;
}

/* 特定图标固定尺寸 */
.feature-icon,
.step-icon,
.card-step .icon,
.card .icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* Step 数字图标包裹器 - 48px 固定 */
.step-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-shrink: 0;
}

/* 小图标 (inline icons) */
.guide-only-label svg,
.trust-item-icon,
svg[width="20"],
svg[height="20"] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0;
}

/* Logo 专用尺寸 - 视觉增强 */
header .logo img,
.logo-mark {
    width: 70px !important;
    height: auto !important;
    max-width: 70px !important;
    max-height: none !important;
}

/* Logo 品牌文字 */
header .logo span {
    font-size: 1.75rem;
}

/* 3. 防止任何元素撑破容器 */
* {
    max-width: 100%;
    box-sizing: border-box;
}

main,
section,
article,
div {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* 4. 导航栏固定约束 - 防止挤压 */
header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px;
}

header .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap !important;
}

header .nav-links li {
    white-space: nowrap !important;
}

header .nav-links a {
    font-size: 15px !important;
    white-space: nowrap !important;
}

/* 5. Grid 系统约束 */
.hero-grid,
.cities-grid,
.step-card-grid {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
}

/* 6. 防止 Flex 子项撑破容器 */
.hero-grid > *,
.cities-grid > *,
.step-card-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* 7. 响应式约束 */
@media (max-width: 768px) {
    .container,
    .hero-content-wrapper,
    .layout,
    section > div {
        padding-left: 16px;
        padding-right: 16px;
    }

    header nav {
        gap: 16px !important;
    }

    header .nav-links {
        gap: 12px !important;
        font-size: 14px !important;
    }

    .feature-icon,
    .step-icon {
        width: 48px !important;
        height: 48px !important;
    }

    /* Logo 移动端保持 40px */
    header .logo img,
    .logo-mark {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    header .logo span {
        font-size: 1.1rem;
    }
}

/* 8. 清除可能的冲突样式 */
.hero-illustration img {
    max-width: 480px !important;
    width: 100% !important;
    height: auto !important;
}

/* 9. 确保 section 内容居中 */
section {
    width: 100%;
    overflow-x: hidden;
}

section > *:not(.hero-grid):not(.cities-grid):not(.step-card-grid) {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* 10. 按钮约束 - 防止变形 */
.btn,
button,
a.btn {
    white-space: nowrap;
    flex-shrink: 0;
}