/* Introduction */
        .intro { background: var(--white); }
        .intro-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 100px;
            align-items: start;
        }
        .intro-side {
            position: sticky;
            top: 120px;
        }
        .intro-side p {
            max-width: 380px;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.9;
        }
        .since-mark {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 42px;
            color: var(--ink-soft);
            font: 800 .72rem "Manrope", sans-serif;
            letter-spacing: .13em;
        }
        .since-mark::after { content: ""; width: 70px; height: 1px; background: var(--line); }
        .intro-statement {
            margin: 0;
            font-size: clamp(2rem, 3.7vw, 3.65rem);
            font-weight: 800;
            line-height: 1.42;
            letter-spacing: -.052em;
        }
        .intro-statement mark { color: var(--blue); background: none; }
        .intro-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            margin-top: 70px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .intro-detail { min-height: 210px; padding: 34px; background: #fff; }
        .detail-index { color: var(--blue); font: 800 .72rem "Manrope", sans-serif; letter-spacing: .12em; }
        .intro-detail h3 { margin: 48px 0 12px; font-size: 1.23rem; }
        .intro-detail p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.78; }

        /* Problem band */
        .problem { color: #fff; background: var(--navy); }
        .problem-head { display: flex; justify-content: space-between; gap: 60px; align-items: end; }
        .problem-head .section-kicker { color: var(--amber); }
        .problem-head .section-lead { color: #9eabb7; margin: 0; }
        .problem-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-top: 64px;
        }
        .problem-card {
            position: relative;
            min-height: 335px;
            display: grid;
            grid-template-rows: 165px 1fr;
            padding: 0;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-md);
            background: #fff;
            overflow: hidden;
            transition: transform .3s, border-color .3s, box-shadow .3s;
        }
        .problem-card:nth-child(1) { --problem-image: url("assets/images/challenge-attendance.jpg"); --problem-position: 54% center; }
        .problem-card:nth-child(2) { --problem-image: url("assets/images/challenge-payroll.jpg"); --problem-position: 62% center; }
        .problem-card:nth-child(3) { --problem-image: url("assets/images/challenge-material.jpg"); --problem-position: 58% center; }
        .problem-card:nth-child(4) { --problem-image: url("assets/images/challenge-project.jpg"); --problem-position: 60% center; }
        .problem-card::before {
            content: "";
            position: absolute;
            z-index: 0;
            inset: 0;
            background-image: var(--problem-image);
            background-position: var(--problem-position, center);
            background-size: cover;
            height: 165px;
            filter: blur(1.1px) saturate(.72) contrast(1.03);
            opacity: .88;
            transform: scale(1.025);
            transition: opacity .5s, transform .7s ease;
        }
        .problem-card::after {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0 0 auto;
            height: 165px;
            background: linear-gradient(180deg, rgba(7,17,26,.74) 0%, rgba(7,17,26,.58) 100%);
        }
        .problem-card:hover { transform: translateY(-6px); border-color: rgba(242,166,25,.5); box-shadow: 0 18px 38px rgba(0,0,0,.2); }
        .problem-card:hover::before { opacity: .96; transform: scale(1.065); }
        .problem-card > * { position: relative; z-index: 2; }
        .problem-card-top { display: flex; flex-direction: column; padding: 27px 30px 23px; }
        .problem-card-body { min-height: 170px; padding: 24px 30px 27px; background: #fff; }
        .problem-card span { color: var(--amber); font: 800 .72rem "Manrope", sans-serif; }
        .problem-card h3 { margin: 45px 0 0; color: #fff; font-size: calc(1.35rem + 1pt); }
        .problem-card p { margin: 0; color: #52606d; font-size: calc(.94rem + 1pt); line-height: 1.8; }
        .answer-list {
            display: grid;
            gap: 15px;
            margin-top: 44px;
        }
        .answer-line {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 0;
            color: #dce5ec;
            font-size: .95rem;
        }
        .answer-line::before { content: ""; flex: 0 0 54px; height: 2px; background: var(--amber); }