:root {
            --ink: #10213f;
            --muted: #5f6f86;
            --blue: #1f4f8f;
            --blue-2: #2f7ddf;
            --orange: #ff9f1c;
            --coral: #ff6b4a;
            --teal: #12b3a8;
            --cream: #fff7e7;
            --paper: #ffffff;
            --line: rgba(16, 33, 63, .12);
            --shadow: 0 24px 60px rgba(20, 49, 91, .15);
            --radius: 8px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            font-family: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.7;
            background:
                linear-gradient(180deg, #fffaf0 0%, #eef8ff 42%, #fff 100%);
        }

        a {
            color: inherit;
        }

        img {
            display: block;
            max-width: 100%;
        }

        .container {
            width: min(1120px, calc(100% - 40px));
            margin: 0 auto;
        }

        .site-nav {
            position: fixed;
            z-index: 20;
            top: 16px;
            left: 0;
            right: 0;
            pointer-events: none;
        }

        .nav-shell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 10px 12px 10px 14px;
            border: 1px solid rgba(255, 255, 255, .48);
            border-radius: 999px;
            background: rgba(255, 255, 255, .86);
            box-shadow: 0 14px 40px rgba(16, 33, 63, .12);
            backdrop-filter: blur(18px);
            pointer-events: auto;
        }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            font-weight: 900;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .brand-icon {
            flex: 0 0 auto;
            width: 58px;
            height: 58px;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            filter: drop-shadow(0 8px 18px rgba(16, 33, 63, .2));
        }

        .brand-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .brand-name {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
        }

        .brand-name small {
            color: var(--muted);
            font-size: .72rem;
            font-weight: 700;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav-links a {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 0 13px;
            border-radius: 999px;
            color: #233651;
            font-size: .94rem;
            font-weight: 800;
            text-decoration: none;
        }

        .nav-links a:hover {
            background: rgba(31, 79, 143, .08);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            background: var(--blue);
            color: #fff;
            font-size: 1.2rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 0 18px;
            border: 1px solid transparent;
            border-radius: 999px;
            font-weight: 900;
            text-decoration: none;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-primary {
            background: var(--orange);
            color: #101828;
            box-shadow: 0 16px 34px rgba(255, 159, 28, .32);
        }

        .btn-dark {
            background: var(--ink);
            color: #fff;
            box-shadow: 0 16px 34px rgba(16, 33, 63, .22);
        }

        .btn-ghost {
            border-color: rgba(255, 255, 255, .52);
            background: rgba(255, 255, 255, .16);
            color: #fff;
        }

        .hero {
            position: relative;
            min-height: 86vh;
            display: grid;
            align-items: end;
            overflow: hidden;
            color: #fff;
            background-image:
                linear-gradient(90deg, rgba(8, 20, 40, .9) 0%, rgba(8, 20, 40, .62) 44%, rgba(8, 20, 40, .18) 100%),
                url("images/puffer_hero_1200.jpg");
            background-position: center;
            background-size: cover;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 110px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fffaf0);
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            padding: 132px 0 86px;
        }

        .hero-logo {
            display: block;
            width: min(340px, 76vw);
            height: auto;
            margin: 0 0 20px;
            filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .34));
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            min-height: 34px;
            padding: 0 13px;
            border: 1px solid rgba(255, 255, 255, .38);
            border-radius: 999px;
            background: rgba(255, 255, 255, .14);
            color: #fff1c2;
            font-weight: 900;
        }

        .hero h1 {
            max-width: 800px;
            margin: 20px 0 18px;
            font-family: "Zen Maru Gothic", "Noto Sans TC", sans-serif;
            font-size: clamp(3rem, 8vw, 6.6rem);
            line-height: 1.04;
            letter-spacing: 0;
            text-wrap: balance;
        }

        .hero-lead {
            max-width: 650px;
            margin: 0 0 30px;
            color: rgba(255, 255, 255, .86);
            font-size: clamp(1.08rem, 2vw, 1.35rem);
            font-weight: 600;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-proof {
            position: relative;
            z-index: 2;
            margin-top: -34px;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .96);
            box-shadow: var(--shadow);
        }

        .proof-item {
            padding: 20px;
            border-right: 1px solid var(--line);
        }

        .proof-item:last-child {
            border-right: 0;
        }

        .proof-item strong {
            display: block;
            color: var(--ink);
            font-size: 1.25rem;
            font-weight: 900;
        }

        .proof-item span {
            color: var(--muted);
            font-size: .94rem;
            font-weight: 700;
        }

        section {
            padding: 86px 0;
        }

        .section-heading {
            display: grid;
            gap: 12px;
            max-width: 760px;
            margin-bottom: 34px;
        }

        .section-heading.center {
            margin-inline: auto;
            text-align: center;
        }

        .label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            min-height: 32px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(31, 79, 143, .1);
            color: var(--blue);
            font-weight: 900;
        }

        .section-heading.center .label {
            margin-inline: auto;
        }

        h2 {
            margin: 0;
            font-family: "Zen Maru Gothic", "Noto Sans TC", sans-serif;
            font-size: clamp(2rem, 5vw, 3.4rem);
            line-height: 1.14;
            letter-spacing: 0;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1.08rem;
            font-weight: 600;
        }

        .about-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
            gap: 30px;
            align-items: stretch;
        }

        .about-panel {
            padding: 32px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
            box-shadow: 0 18px 46px rgba(16, 33, 63, .08);
        }

        .about-panel p {
            margin: 0 0 18px;
            color: #263a58;
            font-size: 1.06rem;
            font-weight: 600;
        }

        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }

        .tag-list span {
            min-height: 34px;
            padding: 5px 12px;
            border-radius: 999px;
            background: #f2f7ff;
            color: var(--blue);
            font-weight: 900;
        }

        .quote-card {
            display: grid;
            align-content: space-between;
            min-height: 100%;
            padding: 32px;
            border-radius: var(--radius);
            background: var(--ink);
            color: #fff;
            box-shadow: var(--shadow);
        }

        .quote-card strong {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            line-height: 1.18;
            font-family: "Zen Maru Gothic", "Noto Sans TC", sans-serif;
        }

        .quote-card span {
            margin-top: 20px;
            color: rgba(255, 255, 255, .72);
            font-weight: 700;
        }

        .services {
            background: #fff;
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .service-card {
            display: grid;
            gap: 16px;
            min-height: 260px;
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
            box-shadow: 0 16px 40px rgba(16, 33, 63, .07);
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .service-card:hover,
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 26px 58px rgba(16, 33, 63, .14);
        }

        .service-icon {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            border-radius: var(--radius);
            background: var(--orange);
            color: #101828;
            font-size: 1.35rem;
        }

        .service-card:nth-child(2) .service-icon,
        .service-card:nth-child(5) .service-icon {
            background: #dff8f5;
            color: #06746d;
        }

        .service-card:nth-child(3) .service-icon,
        .service-card:nth-child(6) .service-icon {
            background: #e7f0ff;
            color: var(--blue);
        }

        .service-card h3,
        .project-copy h3,
        .contact-card h3 {
            margin: 0;
            font-size: 1.28rem;
            line-height: 1.35;
        }

        .service-card p,
        .project-copy p {
            margin: 0;
            color: var(--muted);
            font-weight: 600;
        }

        .works {
            background:
                linear-gradient(180deg, #eef8ff 0%, #fffaf0 100%);
        }

        .works-group {
            display: grid;
            gap: 18px;
        }

        .works-group + .works-group {
            margin-top: 34px;
        }

        .works-group-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--line);
        }

        .works-group-title h3 {
            margin: 0;
            font-size: 1.12rem;
        }

        .works-group-title p {
            max-width: 620px;
            margin: 0;
            color: var(--muted);
            font-weight: 700;
        }

        .project-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .project-card {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
            color: var(--ink);
            text-decoration: none;
            box-shadow: 0 16px 42px rgba(16, 33, 63, .08);
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .project-card figure {
            position: relative;
            height: 250px;
            margin: 0;
            overflow: hidden;
            background: #f1f6ff;
        }

        .project-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .28s ease;
        }

        .project-card:hover img {
            transform: scale(1.04);
        }

        .project-card--case figure {
            display: grid;
            place-items: center;
            height: 170px;
            background:
                radial-gradient(circle at 25% 15%, rgba(255, 159, 28, .32), transparent 34%),
                radial-gradient(circle at 84% 20%, rgba(18, 179, 168, .24), transparent 30%),
                linear-gradient(135deg, #fffaf0 0%, #eaf5ff 100%);
        }

        .project-visual {
            display: grid;
            place-items: center;
            width: 82px;
            height: 82px;
            border: 1px solid rgba(16, 33, 63, .1);
            border-radius: 24px;
            background: rgba(255, 255, 255, .78);
            box-shadow: 0 18px 40px rgba(16, 33, 63, .12);
            color: var(--blue);
            font-size: 2rem;
        }

        .project-badge {
            position: absolute;
            left: 14px;
            bottom: 14px;
            display: inline-flex;
            min-height: 32px;
            padding: 0 11px;
            align-items: center;
            border-radius: 999px;
            background: rgba(16, 33, 63, .86);
            color: #fff;
            font-size: .9rem;
            font-weight: 900;
        }

        .project-copy {
            display: grid;
            gap: 10px;
            padding: 22px;
        }

        .project-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue-2);
            font-weight: 900;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 2px;
        }

        .project-tags span {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 9px;
            border-radius: 999px;
            background: rgba(31, 79, 143, .08);
            color: #31516f;
            font-size: .82rem;
            font-weight: 900;
        }

        .ip-band {
            background: #fff;
        }

        .ip-layout {
            display: grid;
            grid-template-columns: 380px minmax(0, 1fr);
            gap: 42px;
            align-items: center;
        }

        .ip-art {
            overflow: hidden;
            border-radius: var(--radius);
            background: #fff2d4;
            box-shadow: var(--shadow);
        }

        .ip-art img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .ip-list {
            display: grid;
            gap: 12px;
            margin: 26px 0 0;
            padding: 0;
            list-style: none;
        }

        .ip-list li {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px solid var(--line);
            color: #263a58;
            font-weight: 700;
        }

        .ip-list i {
            margin-top: 5px;
            color: var(--orange);
        }

        .faq-section {
            background:
                radial-gradient(circle at 10% 15%, rgba(255, 159, 28, .16), transparent 28%),
                radial-gradient(circle at 92% 12%, rgba(18, 179, 168, .14), transparent 28%),
                #fff;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .faq-item {
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 16px 36px rgba(16, 33, 63, .08);
        }

        .faq-item h3 {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: 1.08rem;
            line-height: 1.4;
        }

        .faq-item p {
            margin: 0;
            color: var(--muted);
            font-weight: 650;
        }

        .social-contact {
            background: var(--ink);
            color: #fff;
        }

        .social-contact .section-heading p,
        .social-contact .contact-card p,
        .social-contact .contact-note {
            color: rgba(255, 255, 255, .76);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
            gap: 22px;
        }

        .contact-card {
            display: grid;
            gap: 18px;
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .08);
        }

        .contact-actions,
        .footer-links,
        .mini-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .line-preview {
            display: grid;
            grid-template-columns: 124px minmax(0, 1fr);
            gap: 18px;
            align-items: center;
        }

        .line-preview img {
            width: 124px;
            height: 124px;
            border-radius: var(--radius);
            object-fit: cover;
        }

        .line-official {
            display: grid;
            grid-template-columns: 112px minmax(0, 1fr);
            gap: 18px;
            align-items: center;
            padding: 16px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .08);
        }

        .line-qr {
            width: 112px;
            height: 112px;
            border: 6px solid #fff;
            border-radius: var(--radius);
            background: #fff;
            object-fit: contain;
        }

        .line-official-id {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            min-height: 32px;
            margin-top: 8px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(6, 199, 85, .16);
            color: #8affb9;
            font-weight: 900;
        }

        .line-add-button {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            min-height: 38px;
            padding: 0;
            border-radius: 6px;
            background: #06c755;
            box-shadow: 0 14px 30px rgba(6, 199, 85, .22);
        }

        .line-add-button img {
            height: 36px;
            width: auto;
        }

        .mini-links a {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 36px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            text-decoration: none;
            font-weight: 900;
        }

        footer {
            padding: 34px 0;
            background: #071326;
            color: rgba(255, 255, 255, .72);
        }

        .footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .footer-brand img {
            width: 48px;
            height: 48px;
            border-radius: 16px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, .78);
            text-decoration: none;
            font-weight: 700;
        }

        .back-top {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 19;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--orange);
            color: #101828;
            box-shadow: 0 18px 44px rgba(16, 33, 63, .22);
        }

        @media (max-width: 900px) {
            .container {
                width: min(100% - 28px, 1120px);
            }

            .nav-shell {
                border-radius: 26px;
                align-items: flex-start;
            }

            .menu-toggle {
                display: inline-grid;
                place-items: center;
                flex: 0 0 auto;
            }

            .nav-links {
                position: absolute;
                top: calc(100% + 8px);
                left: 14px;
                right: 14px;
                display: none;
                grid-template-columns: 1fr 1fr;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: var(--radius);
                background: rgba(255, 255, 255, .96);
                box-shadow: var(--shadow);
            }

            .nav-links.is-open {
                display: grid;
            }

            .nav-links a {
                justify-content: center;
                background: #f4f7fb;
            }

            .hero {
                min-height: 82vh;
                background-position: 62% center;
            }

            .hero-inner {
                padding: 124px 0 72px;
            }

            .proof-grid,
            .service-grid,
            .project-grid,
            .faq-grid,
            .about-layout,
            .ip-layout,
            .contact-grid {
                grid-template-columns: 1fr;
            }

            .works-group-title {
                align-items: flex-start;
                flex-direction: column;
            }

            .proof-item {
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .proof-item:last-child {
                border-bottom: 0;
            }

            .ip-layout {
                gap: 24px;
            }
        }

        @media (max-width: 560px) {
            section {
                padding: 64px 0;
            }

            .brand-name span {
                font-size: .95rem;
            }

            .brand-icon {
                width: 50px;
                height: 50px;
            }

            .brand-name small {
                display: none;
            }

            .hero-actions .btn,
            .contact-actions .btn {
                width: 100%;
            }

            .hero {
                background-image:
                    linear-gradient(180deg, rgba(8, 20, 40, .86) 0%, rgba(8, 20, 40, .58) 62%, rgba(8, 20, 40, .24) 100%),
                    url("images/puffer_hero_1200.jpg");
            }

            .hero h1 {
                font-size: clamp(2.7rem, 15vw, 4.5rem);
            }

            .about-panel,
            .quote-card,
            .service-card,
            .contact-card {
                padding: 22px;
            }

            .project-card figure {
                height: 210px;
            }

            .line-preview {
                grid-template-columns: 1fr;
            }

            .line-official {
                grid-template-columns: 1fr;
            }

            .line-preview img {
                width: 150px;
                height: 150px;
            }

            .line-qr {
                width: 150px;
                height: 150px;
            }

            .footer-row {
                align-items: flex-start;
                flex-direction: column;
            }
        }

/* Puffer Meme multi-page additions */
.nav-links a[aria-current="page"] {
    background: rgba(31, 79, 143, .1);
    color: var(--blue);
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 154px 0 74px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(8, 20, 40, .94) 0%, rgba(31, 79, 143, .78) 54%, rgba(18, 179, 168, .48) 100%),
        url("images/puffer_hero_1200.jpg");
    background-position: center;
    background-size: cover;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 76px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fffaf0);
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    max-width: 820px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.breadcrumb a {
    color: #fff6d0;
    text-decoration: none;
}

.page-hero h1 {
    margin: 0;
    font-family: "Zen Maru Gothic", "Noto Sans TC", sans-serif;
    font-size: clamp(2.5rem, 7vw, 5.2rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

.page-hero p {
    max-width: 740px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    font-weight: 650;
}

.page-main {
    background: linear-gradient(180deg, #fffaf0 0%, #eef8ff 48%, #fff 100%);
}

.content-band {
    padding: 76px 0;
}

.content-band.is-white {
    background: #fff;
}

.content-band.is-ink {
    background: var(--ink);
    color: #fff;
}

.content-band.is-ink .section-heading p,
.content-band.is-ink .detail-card p,
.content-band.is-ink .check-list {
    color: rgba(255, 255, 255, .78);
}

.grid-2,
.grid-3 {
    display: grid;
    gap: 20px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-card,
.wide-card,
.step-card,
.faq-row {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 40px rgba(16, 33, 63, .08);
}

.detail-card,
.step-card,
.faq-row {
    padding: 26px;
}

.wide-card {
    padding: 32px;
}

.detail-card h2,
.detail-card h3,
.wide-card h2,
.wide-card h3,
.step-card h3,
.faq-row h2,
.faq-row h3 {
    margin: 0 0 10px;
    line-height: 1.35;
}

.detail-card p,
.wide-card p,
.step-card p,
.faq-row p {
    margin: 0;
    color: var(--muted);
    font-weight: 650;
}

.card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--orange);
    color: #101828;
    font-size: 1.35rem;
}

.check-list,
.plain-list {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: #263a58;
    font-weight: 700;
}

.check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.check-list i {
    margin-top: 5px;
    color: var(--teal);
}

.meta-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.meta-strip span {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: .92rem;
    font-weight: 800;
}

.meta-strip span:last-child {
    border-right: 0;
}

.meta-strip strong {
    color: var(--ink);
    font-size: 1.22rem;
}

.process-list {
    counter-reset: step;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-list li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.process-list li::before {
    content: counter(step, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #e7f0ff;
    color: var(--blue);
    font-weight: 900;
}

.process-list h3 {
    margin: 0 0 4px;
    font-size: 1.08rem;
}

.process-list p {
    margin: 0;
    color: var(--muted);
    font-weight: 650;
}

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 159, 28, .28), transparent 26%),
        radial-gradient(circle at 92% 22%, rgba(18, 179, 168, .2), transparent 26%),
        var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

.cta-panel h2,
.cta-panel h3,
.cta-panel p {
    margin: 0;
}

.cta-panel p {
    color: rgba(255, 255, 255, .76);
    font-weight: 650;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

.link-card {
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(16, 33, 63, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(16, 33, 63, .14);
}

.link-card small {
    color: var(--blue);
    font-weight: 900;
}

.link-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 650;
}

.split-panel {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 30px;
    align-items: center;
}

.split-panel figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff2d4;
    box-shadow: var(--shadow);
}

.split-panel figure img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.faq-stack {
    display: grid;
    gap: 16px;
}

.faq-row {
    display: grid;
    gap: 8px;
}

.line-store-box {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.line-store-box img {
    width: 150px;
    height: 150px;
    border: 8px solid #fff;
    border-radius: var(--radius);
    background: #fff;
    object-fit: contain;
    box-shadow: 0 16px 40px rgba(16, 33, 63, .12);
}

@media (max-width: 900px) {
    .grid-2,
    .grid-3,
    .meta-strip,
    .split-panel {
        grid-template-columns: 1fr;
    }

    .meta-strip span {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .meta-strip span:last-child {
        border-bottom: 0;
    }

    .cta-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .page-hero {
        padding: 136px 0 62px;
    }

    .content-band {
        padding: 58px 0;
    }

    .wide-card,
    .detail-card,
    .step-card,
    .faq-row,
    .cta-panel {
        padding: 22px;
    }

    .line-store-box {
        grid-template-columns: 1fr;
    }

    .line-store-box img {
        width: 138px;
        height: 138px;
    }
}