/**
 * introduction — Component CSS
 */
        .about-intro { padding: 4rem 0; overflow: hidden; background: var(--pi-bg-card, #ffffff); }
        .about-intro__container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
        .about-intro__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
        @media (min-width: 1024px) { .about-intro__grid { grid-template-columns: 1fr 1fr; } }
        /* Image Grid */
        .about-intro__images { position: relative; }
        .about-intro__img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .about-intro__img-col { display: flex; flex-direction: column; gap: 1rem; }
        .about-intro__img-col--offset { padding-top: 3rem; }
        .about-intro__img { border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); width: 100%; object-fit: cover; transition: transform 0.5s; border: 2px solid transparent; }
        .about-intro__img:hover { transform: scale(1.05); border-color: color-mix(in srgb, var(--pi-secondary, #ffb703) 50%, transparent); }
        .about-intro__img--tall { height: 16rem; }
        .about-intro__img--short { height: 12rem; }
        /* Badge */
        .about-intro__badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1.5rem; border-radius: 50%; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 6px solid var(--pi-bg-card, #ffffff); text-align: center; width: 10rem; height: 10rem; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; cursor: pointer; overflow: hidden; background-image: linear-gradient(to bottom right, var(--pi-primary, #007d3d), var(--pi-primary-dark, #004d26)); color: #fff; transition: transform 0.3s; }
        .about-intro__badge:hover { transform: translate(-50%, -50%) scale(1.1); }
        .about-intro__badge-ring { position: absolute; inset: 0; border: 4px solid color-mix(in srgb, var(--pi-secondary, #ffb703) 35%, transparent); border-radius: 50%; animation: pulse 2s infinite; }
        .about-intro__badge-number { font-size: 2.25rem; font-weight: 900; display: block; position: relative; z-index: 10; color: var(--pi-secondary, #ffb703); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
        .about-intro__badge-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; position: relative; z-index: 10; opacity: 0.9; margin-top: 0.25rem; }
        /* Content Side */
        .about-intro__content { display: flex; flex-direction: column; gap: 2rem; }
        .about-intro__tag { color: var(--pi-primary, #007d3d); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.875rem; }
        .about-intro__title { font-size: 2.25rem; font-weight: 700; line-height: 1.2; color: var(--pi-text, #0f172a); margin: 0; }
        .about-intro__lead { line-height: 1.625; font-size: 1.125rem; color: var(--pi-text-2, #334155); margin: 0; }
        /* Features */
        .about-intro__features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 640px) { .about-intro__features { grid-template-columns: 1fr 1fr; } }
        .about-intro__feature { display: flex; align-items: flex-start; gap: 1rem; }
        .about-intro__feature-icon { width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--pi-primary, #007d3d) 12%, transparent); color: var(--pi-primary, #007d3d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .about-intro__feature-icon svg { width: 1.5rem; height: 1.5rem; }
        .about-intro__feature-title { font-weight: 700; margin-bottom: 0.25rem; color: var(--pi-text, #0f172a); }
        .about-intro__feature-desc { font-size: 0.875rem; color: var(--pi-text-3, #64748b); margin: 0; }
        /* Stats */
        .about-intro__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--pi-border, #e2e8f0); padding-top: 2rem; }
        .about-intro__stat { text-align: center; }
        .about-intro__stat + .about-intro__stat { border-left: 1px solid var(--pi-border, #e2e8f0); }
        .about-intro__stat-number { display: block; font-size: 1.875rem; font-weight: 700; color: var(--pi-primary, #007d3d); margin-bottom: 0.25rem; }
        .about-intro__stat-label { font-size: 0.875rem; color: var(--pi-text-3, #64748b); }
        /* Dark Mode */
        .dark .about-intro { background: var(--pi-bg-card, #1e293b); }
        .dark .about-intro__title { color: var(--pi-text, #f1f5f9); }
        .dark .about-intro__lead { color: var(--pi-text-2, #e2e8f0); }
        .dark .about-intro__feature-title { color: var(--pi-text, #f1f5f9); }
        .dark .about-intro__feature-desc { color: var(--pi-text-3, #94a3b8); }
        .dark .about-intro__badge { border-color: var(--pi-bg-card, #1e293b); }
        .dark .about-intro__stats { border-top-color: var(--pi-border, #334155); }
        .dark .about-intro__stat + .about-intro__stat { border-left-color: var(--pi-border, #334155); }