* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --coral: #F2A09A; --coral-light: #FDF5F4;
            --teal: #4CB5AE; --teal-dark: #3A9A94; --teal-light: #E8F6F5;
            --navy: #1A2B3C; --text-dark: #2D3748; --text-gray: #5A6B7D;
            --text-light: #8899AA; --white: #FFFFFF; --bg-cream: #FFFAF9; --border: #E8ECF1;
        }
        html { scroll-behavior: smooth; }
        body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-dark); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; }
        h1, h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
        .index-hero { padding: 140px 20px 48px; background: linear-gradient(170deg, var(--bg-cream) 0%, var(--white) 60%, var(--teal-light) 100%); text-align: center; }
        .index-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--navy); max-width: 760px; margin: 0 auto 16px; line-height: 1.15; }
        .index-hero p { font-family: 'Newsreader', Georgia, serif; font-size: 1.1rem; color: var(--text-gray); max-width: 640px; margin: 0 auto; }
        .index-section { max-width: 1080px; margin: 0 auto; padding: 40px 20px; }
        .index-section h2 { font-size: 1.6rem; color: var(--navy); margin-bottom: 8px; }
        .index-section .section-sub { color: var(--text-gray); margin-bottom: 28px; font-size: 0.95rem; }
        .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .article-card { display: block; padding: 24px; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; background: var(--white); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
        .article-card:hover { transform: translateY(-2px); border-color: rgba(76,181,174,0.4); box-shadow: 0 12px 28px rgba(26,43,60,0.08); }
        .article-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.35; }
        .article-card p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.55; }
        .article-card .card-tag { display: inline-block; background: var(--teal-light); color: var(--teal-dark); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 12px; margin-bottom: 12px; }
        .article-card .card-tag.ops { background: var(--coral-light); color: #C96A5F; }
        .index-cta { text-align: center; padding: 24px 20px 72px; }
        .index-cta a { display: inline-block; background: var(--teal); color: #fff; padding: 14px 32px; border-radius: 30px; text-decoration: none; font-weight: 600; }
        .index-cta a:hover { background: var(--teal-dark); }