@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Great+Vibes&family=Playfair+Display:ital@1&family=Montserrat:wght@700&family=Alex+Brush&display=swap');

    :root {
        --brand-green: #0F2A1D; 
        --brand-gold: #C8A24A;  
        --bg-white: #FFFFFF;    
        --soft-grey: #F9F9FA;
    }

    .ms-name-page { font-family: 'Poppins', sans-serif; color: #333; line-height: 1.8; background-color: var(--bg-white); box-sizing: border-box; overflow-x: hidden; }
    .ms-container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
    
    h1, h2, h3, h4 { color: var(--brand-green); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; text-align: center; }
    h2 { font-size: 30px; margin-bottom: 60px; border-bottom: 1px solid #eee; display: inline-block; padding-bottom: 15px; width: 100%; }
    .gold-text { color: var(--brand-gold); }

    /* SECTION 1: HERO */
    .ms-hero { 
        text-align: center; padding: 140px 20px; 
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('//ueeshop.ly200-cdn.com/u_file/UPBC/UPBC999/2511/19/photo/Customizable-Name-Jewelry.jpg'); 
        background-size: cover; background-position: center; border-bottom: 1px solid #f0f0f0; margin-bottom: 80px;
    }
    .ms-hero h1 { font-size: 42px; margin-bottom: 20px; }
    .ms-hero p { font-weight: 400; font-size: 20px; color: var(--brand-green); max-width: 800px; margin: 0 auto; }

    /* SECTION 2: CATEGORIES (Pencil Icons) */
    .ms-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 100px; }
    .ms-cat-item { text-align: center; padding: 20px; }
    .ms-cat-item img { width: 70px; height: auto; margin-bottom: 15px; opacity: 0.9; }
    .ms-cat-item h5 { font-size: 13px; color: #888; margin: 0; font-weight: 400; letter-spacing: 1px; }

    /* SECTION 3: TYPOGRAPHY LAB */
    .ms-font-section { background: var(--soft-grey); padding: 80px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 100px; }
    .ms-font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
    .ms-font-box { background: #fff; padding: 40px 20px; text-align: center; border: 1px solid #eee; transition: 0.3s; }
    .ms-font-box:hover { border-color: var(--brand-gold); box-shadow: 0 10px 25px rgba(0,0,0,0.03); }
    .ms-font-preview { font-size: 34px; color: var(--brand-gold); margin-bottom: 15px; display: block; }
    .ms-font-name { font-size: 11px; color: #bbb; text-transform: uppercase; letter-spacing: 2px; }
    
    .f-cursive { font-family: 'Great Vibes', cursive; }
    .f-classic { font-family: 'Playfair Display', serif; font-style: italic; }
    .f-modern { font-family: 'Montserrat', sans-serif; font-weight: 700; }
    .f-elegant { font-family: 'Alex Brush', cursive; }

    /* SECTION 4: SPECS (Plating & Chains) */
    .ms-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 120px; }
    .ms-spec-card { border: 1px solid #eee; padding: 35px; text-align: center; background: #fff; }
    .ms-spec-card h4 { font-size: 15px; margin-bottom: 25px; }
    .ms-spec-img-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ms-spec-img-row img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #f5f5f5; }

    /* SECTION 5: QUALITY CHECK */
    .ms-quality-section { padding: 100px 0; background: var(--bg-white); margin-bottom: 120px; }
    .ms-quality-row { display: flex; gap: 60px; align-items: center; flex-wrap: wrap; }
    .ms-quality-img-grid { flex: 1.2; min-width: 450px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .ms-quality-img-grid img { 
        width: 100%; 
        aspect-ratio: 1 / 1;
        object-fit: cover; 
        border: 1px solid #f5f5f5; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.03); 
    }
    .ms-quality-text { flex: 1; min-width: 400px; text-align: left; }
    .ms-quality-list { list-style: none; padding: 0; }
    .ms-quality-list li { margin-bottom: 20px; padding-left: 35px; position: relative; font-size: 16px; font-weight: 300; }
    .ms-quality-list li::before { content: '✔'; position: absolute; left: 0; color: var(--brand-gold); font-weight: bold; font-size: 20px; }

    /* SECTION 6: B2B SUPPORT */
    .ms-b2b-section { padding-bottom: 120px; }
    .ms-b2b-row { display: flex; gap: 80px; align-items: center; flex-wrap: wrap-reverse; }
    .ms-b2b-img { flex: 0.8; min-width: 350px; text-align: center; }
    .ms-b2b-img img { width: 100%; max-width: 450px; border: 1px solid #eee; }
    .ms-b2b-text { flex: 1.2; min-width: 400px; text-align: left; }
    .ms-b2b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
    .ms-b2b-item { border-left: 3px solid var(--brand-gold); padding: 15px 20px; background: #fafafa; }
    .ms-b2b-item h5 { margin: 0 0 5px; color: var(--brand-green); font-size: 15px; text-align: left; }
    .ms-b2b-item p { margin: 0; font-size: 13px; color: #888; font-weight: 300; }

    /* SECTION 7: WORKFLOW */
    .ms-flow-section { padding: 100px 0; background: var(--brand-green); color: #fff; text-align: center; }
    .ms-flow-section h2 { color: #fff; border-bottom: none; }
    .ms-flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
    .ms-flow-card { padding: 35px 15px; border: 1px solid rgba(255,255,255,0.1); }
    .ms-flow-card h4 { color: var(--brand-gold); font-size: 16px; margin-bottom: 10px; }
    .ms-flow-card p { font-size: 13px; color: #a9b5ae; margin: 0; font-weight: 300; }

    /* FINAL CTA */
    .ms-cta { text-align: center; padding: 120px 20px; }
    .ms-btn-luxury { display: inline-block; background: var(--brand-gold); color: #fff; padding: 18px 65px; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; font-size: 14px; border-radius: 2px; }
    .ms-btn-luxury:hover { background: var(--brand-green); transform: translateY(-3px); }

    /* ======================================
       核心修复：移动端排版全优化
       ====================================== */
    @media (max-width: 991px) {
        /* 1. 修复标题太大的问题 */
        .ms-hero h1 { font-size: 28px; }
        .ms-hero p { font-size: 16px; }
        h2 { font-size: 22px; margin-bottom: 40px; }

        /* 2. 修复图文挤在一起的问题：增加全局间距 */
        .ms-hero { padding: 80px 20px; margin-bottom: 60px; }
        .ms-font-section { padding: 60px 0; margin-bottom: 60px; }
        .ms-quality-section { padding: 60px 0; margin-bottom: 60px; }
        .ms-b2b-section { padding-bottom: 60px; }
        .ms-flow-section { padding: 60px 0; }
        .ms-cta { padding: 80px 20px; }

        /* 3. 修复不居中的问题：所有模块强制居中 */
        .ms-quality-row, .ms-b2b-row { 
            flex-direction: column; 
            gap: 40px; 
            align-items: center;
            text-align: center;
        }
        .ms-quality-img-grid, .ms-b2b-img { min-width: 100%; }
        .ms-quality-text, .ms-b2b-text { 
            min-width: 100%; 
            text-align: center; 
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 4. 修复图文间距：给所有图片加底部间距 */
        .ms-quality-img-grid { margin-bottom: 20px; }
        .ms-b2b-img img { margin-bottom: 20px; }
        .ms-spec-card { margin-bottom: 20px; }

        /* 5. 优化网格布局，避免元素挤在一起 */
        .ms-font-grid, .ms-spec-grid, .ms-flow-grid { 
            grid-template-columns: 1fr; 
            gap: 25px; 
        }
        .ms-cat-grid { 
            grid-template-columns: 1fr 1fr; 
            gap: 25px; 
            margin-bottom: 60px;
        }
        .ms-b2b-grid { 
            grid-template-columns: 1fr; 
            gap: 15px; 
            width: 100%;
        }

        /* 6. 修复列表居中问题 */
        .ms-quality-list { width: 100%; max-width: 400px; }
        .ms-quality-list li { 
            padding-left: 0; 
            text-align: left; 
            padding-left: 35px;
        }
    }