@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


        :root {
            --blue:       #C0392B;
            --blue-dark:  #C0392B;
            --blue-light: #e8f4fd;
            --blue-pale:  #F8F9FA;
            --border:     #d0e8f7;
            --white:      #ffffff;
            --page-bg:    #f0f4f8;
            --text:       #1a1a2e;
            --text-mid:   #374151;
            --text-muted: #6b7280;
            --green:      #2e8b57;
            --green-bg:   #edf7f1;
            --green-border:#a5d6a7;
          }

        * { margin:0; padding:0; box-sizing:border-box; }

        body {
            
            background: #F8F9FA;
            color: var(--text);
            font-size: 16.5px;
            line-height: 1.85;
            font-family: "Plus Jakarta Sans", sans-serif;
        }

        /* ══ SITE HEADER ══ */
        .site-header {
            background: #fff;
		    
        }
        .header-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
			height: 69px;
        }
        .site-logo {
            font-family: 'Merriweather', serif;
            font-size: 21px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.3px;
        }
		
		.site-logo img {position: absolute; top: 0;}

        .site-logo span { color: #9dd8f5; }
        .header-tagline { font-size: 12.5px; color: #000; letter-spacing: 0.4px; }

        /* ══ HERO ══ */
        .hero-banner {
            border-bottom: 1px solid #dde8f0;
			background: url('../image/a1.jpg') no-repeat center/cover;
        }
        .hero-inner {
            max-width: 1160px;
            margin: 0 auto;
            padding: 80px 36px 80px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 40px;
            align-items: center;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #e8f4fd;
            color: var(--blue);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid #c2dff5;
            margin-bottom: 18px;
        }
        .hero-badge::before { content: '✦'; font-size: 9px; }
        .hero-title {
            font-size: 34px;
            font-weight: 700;
            color: #fff;
            line-height: 1.3;
            margin-bottom: 16px;
        }
        .hero-title .brand-name { color: var(--blue); }
        .hero-desc {
            font-size: 16px;
            color: #fff;
            max-width: 580px;
            line-height: 1.75;
            margin-bottom: 20px;
        }
        .hero-meta {
            display: flex;
            gap: 0;
            font-size: 13px;
            color: #fff;
            align-items: center;
        }
        .hero-meta span { display: flex; align-items: center; gap: 5px; }
        .hero-meta .sep { margin: 0 10px; opacity: 0.4; }

        /* ══ MAIN WRAPPER ══ */
        .main-wrapper {
            max-width: 1160px;
            margin: 0 auto;
            padding: 36px 36px 80px;
        }

        /* ══ SECTION CARD ══ */
        .section-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid #dde8f2;
            padding: 40px 44px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(26,122,191,0.06);
        }

        /* ══ HEADINGS inside cards ══ */
        .blog-content h2 {
            font-size: 22px;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 8px;
            padding-bottom: 0;
            border: none;
        }
        .h2-accent {
            display: block;
            width: 36px;
            height: 3px;
            background: var(--blue);
            border-radius: 2px;
            margin-bottom: 22px;
        }
        .blog-content h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--blue-dark);
            margin: 28px 0 10px;
        }
        .blog-content h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 6px;
        }
        .blog-content p {
            color: var(--text-mid);
            margin-bottom: 16px;
            font-size: 15.5px;
            line-height: 1.85;
        }
        .blog-content a { color: var(--blue); text-decoration: underline; font-weight: 600; }
        .blog-content a:hover { color: var(--blue-dark); }

        /* ══ INTRO CALLOUT ══ */
        .intro-callout {
            background: var(--blue-pale);
            border-left: 4px solid var(--blue);
            border-radius: 0 10px 10px 0;
            padding: 20px 24px;
            margin: 20px 0 24px;
        }
        .intro-callout p { margin:0; font-size:15px; color: var(--text-mid); font-style: italic; }

        /* ══ INLINE HIGHLIGHT PARAS (bold-key paragraphs) ══ */
        .key-para {
            background: var(--blue-pale);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 14px;
        }
        .key-para p { margin:0; font-size: 15px; }
        .key-para strong { color: var(--text); }

        /* ══ FEATURE CARDS ══ */
        .features-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 24px 0 8px;
        }
        .feature-card {
            background: var(--blue-pale);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px 22px;
            transition: transform 0.18s, box-shadow 0.18s;
        }
        .feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(26,122,191,0.10);
        }
        .feature-card .icon-wrap {
            width: 46px; height: 46px;
            background: var(--green-bg);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
        }
        .feature-card h3 { margin:0 0 8px; font-size:15.5px; color: var(--text); }
        .feature-card p { font-size:14px; color: var(--text-muted); margin:0; line-height:1.7; }

        /* ══ ADVANTAGES GRID ══ */
        .advantages-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 16px;
            margin: 20px 0 28px;
        }
        .adv-card {
            background: var(--blue-pale);
            border-radius: 10px;
            padding: 20px 16px;
            text-align: center;
            transition: transform 0.18s;
        }
        .adv-card:hover { transform: translateY(-2px); }
        .adv-card .adv-icon { font-size: 28px; margin-bottom: 10px; }
        .adv-card h4 { font-size:14px; color: var(--blue-dark); margin-bottom:6px; font-family:'Merriweather',serif; }
        .adv-card p { font-size:13px; color: var(--text-muted); margin:0; line-height:1.6; }

        /* ══ STEPS ══ */
        .steps-list { margin: 20px 0; }
        
        .step-item {
            display: flex;
            gap: 18px;
            margin-bottom: 22px;
            align-items: flex-start;
        }
        .step-num {
            min-width: 40px; height: 40px;
            background: var(--blue);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 16px;
            flex-shrink: 0; margin-top: 2px;
        }
        .step-body h4 {
            font-size: 15px;
            color: var(--blue-dark);
            margin-bottom: 5px;
        }
        .step-body p { margin:0; font-size:15px; }

        /* ══ TIPS BOX ══ */
        .tips-box {
            background: var(--blue-pale);
            border-radius: 12px;
            padding: 24px 28px;
            margin: 24px 0;
            border: 1px solid var(--border);
        }
        .tips-box h3 { color: var(--blue-dark); margin:0 0 14px; font-size:16px; }
        .tips-box ul { margin: 0 0 0 18px; }
        .tips-box ul li { margin-bottom: 10px; color: var(--text-mid); font-size:15px; line-height:1.7; }

        /* ══ MISTAKES BOX ══ */
        .mistakes-box {
            background: #fffbf0;
            border: 1px solid #f5d87a;
            border-radius: 12px;
            padding: 24px 28px;
            margin: 24px 0;
        }
        .mistakes-box h3 { color: #b45309; margin:0 0 14px; font-size:16px; }
        .mistakes-box ul { margin: 0 0 0 18px; }
        .mistakes-box ul li { margin-bottom: 10px; color: var(--text-mid); font-size:15px; line-height:1.7; }

        /* ══ HIGHLIGHT BOX ══ */
        .highlight-box {
            background: var(--green-bg);
            border: 1px solid var(--green-border);
            border-radius: 12px;
            padding: 24px 28px;
            margin: 24px 0;
        }
        .highlight-box h3 { color: var(--green); margin:0 0 12px; font-size:16px; }
        .highlight-box ul { margin: 0 0 0 18px; }
        .highlight-box ul li { margin-bottom:8px; color: var(--text-mid); font-size:15px; }

        /* ══ CLOSURE BANNER ══ */
        .closure-banner {
            background: #182533;
            border-radius: 14px;
            padding: 44px 40px;
            text-align: center;
            margin-top: 8px;
            color: #fff;
        }
        .closure-banner h2 {
            font-family: 'Merriweather', serif;
            font-size: 22px;
            color: #fff;
            margin: 0 0 16px;
        }
        .closure-banner p {
            color: #c8e4f5;
            font-size: 15.5px;
            line-height: 1.8;
            max-width: 900px;
            margin: 0 auto 20px;
        }
        .cta-btn {
            display: inline-block;
            background: #fff;
            color: var(--blue-dark);
            font-weight: 700;
            font-size: 14.5px;
            padding: 12px 32px;
            border-radius: 50px;
            text-decoration: none;
            letter-spacing: 0.3px;
            transition: background 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 12px rgba(0,0,0,0.12);
        }
        .cta-btn:hover { background: #dff0fb; box-shadow: 0 4px 18px rgba(0,0,0,0.15); }

        /* ══ ILLUSTRATION WRAP ══ */
        .illustration-wrap {
            margin: 24px 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: #f7fdf9;
        }
        .illustration-wrap svg { width:100%; height:auto; display:block; }
        .illustration-caption {
            text-align: center;
            font-size: 12.5px;
            color: var(--text-muted);
            padding: 9px;
            background: #f9fbfd;
            border-top: 1px solid var(--border);
            font-style: italic;
        }

        /* ══ FOOTER ══ */
        .site-footer {
            background: #182533;
            color: #e0f4ff;
            text-align: center;
            padding: 28px 20px;
            font-size: 13.5px;
        }
        .site-footer a { color: #6ec9ef; text-decoration: underline; }

        /* ══ RESPONSIVE ══ */
        @media (max-width: 768px) {
            .hero-inner { grid-template-columns: 1fr; }
            .hero-title { font-size: 26px; }
            .features-grid { grid-template-columns: 1fr; }
            .advantages-grid { grid-template-columns: 1fr 1fr; }
            .main-wrapper { padding: 20px 16px 60px; }
            .section-card { padding: 28px 20px; }
            .hero-inner { padding: 36px 20px 32px; }
        }
        @media (max-width: 480px) {
            .advantages-grid { grid-template-columns: 1fr; }
            .header-tagline { display: none; }
            .closure-banner { padding: 32px 20px; }
        }