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

body {
    font-family:
        "Mali",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    /* ลายดูเดิลวาดมือจาง ๆ: </> เฟือง มือถือ ใบไม้ รอยเท้าแมว ดาว { } */
    background-color: #f6f7f9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.08'%3E%3Cpath d='M40 30 Q33 35 28 40 Q33 45 40 50 M56 30 Q63 35 68 40 Q63 45 56 50 M51 27 Q48 40 45 53'/%3E%3Ccircle cx='190' cy='50' r='9'/%3E%3Ccircle cx='190' cy='50' r='3.5'/%3E%3Cpath d='M199 50 H204 M196.4 56.4 L199.9 59.9 M190 59 V64 M183.6 56.4 L180.1 59.9 M181 50 H176 M183.6 43.6 L180.1 40.1 M190 41 V36 M196.4 43.6 L199.9 40.1'/%3E%3Cg transform='rotate(-12 111 131)'%3E%3Crect x='100' y='112' width='22' height='38' rx='5'/%3E%3Cpath d='M108 144 H114'/%3E%3C/g%3E%3Cpath d='M218 186 Q220 160 246 156 Q244 182 218 186 Z M218 186 Q230 172 240 162'/%3E%3Cellipse cx='50' cy='213' rx='9' ry='7'/%3E%3Ccircle cx='37' cy='201' r='3'/%3E%3Ccircle cx='45' cy='194' r='3'/%3E%3Ccircle cx='55' cy='194' r='3'/%3E%3Ccircle cx='63' cy='201' r='3'/%3E%3Cpath d='M160 221 L162.4 226.8 L168.6 227.2 L163.8 231.2 L165.3 237.3 L160 234 L154.7 237.3 L156.2 231.2 L151.4 227.2 L157.6 226.8 Z'/%3E%3Cpath d='M250 92 V108 M242 100 H258'/%3E%3Ccircle cx='128' cy='42' r='3'/%3E%3Cpath d='M80 256 Q85 248 90 256 T100 256 T110 256'/%3E%3Cpath d='M196 108 Q190 108 190 114 V118 Q190 122 186 122 Q190 122 190 126 V130 Q190 136 196 136 M212 108 Q218 108 218 114 V118 Q218 122 222 122 Q218 122 218 126 V130 Q218 136 212 136'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 280px 280px;
    color: #1f2937;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 var(--gutter);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

html {
    overflow-x: clip; /* กัน iOS เลื่อนซ้ายขวาได้ตอนการ์ดแกว่งออกนอกจอ */
}

/* ===== Hand cursors ===== */
:root {
    --gutter: 24px;
    --cursor-point: url("assets/images/cursor-point.svg") 12 2, pointer;
    --cursor-grab: url("assets/images/cursor-grab.svg") 16 16, grab;
    --cursor-grabbing: url("assets/images/cursor-grabbing.svg") 16 16, grabbing;
}

.badge a,
.badge button {
    cursor: var(--cursor-point);
}

.container {
    width: 100%;
    max-width: 620px;
    margin-bottom: 70px;
}

/* ===== Hanging badge ===== */
.badge {
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 0;
    will-change: transform;
    touch-action: pan-y;
    cursor: var(--cursor-grab);
}

.badge.dragging,
.badge.dragging * {
    cursor: var(--cursor-grabbing);
    user-select: none;
}

.lanyard {
    width: 28px;
    height: 120px;
    margin: 0 auto;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0 18px,
            rgba(255, 255, 255, 0.18) 18px 20px
        ),
        linear-gradient(90deg, #0b1220, #1f2937 50%, #0b1220);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.clip {
    position: relative;
    width: 40px;
    height: 26px;
    margin: -2px auto 0;

    background: linear-gradient(180deg, #e5e7eb, #9ca3af 60%, #d1d5db);
    border-radius: 6px 6px 10px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.clip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 14px;
    height: 20px;
    transform: translateX(-50%);

    border: 3px solid #9ca3af;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.card-hole {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 56px;
    height: 10px;
    transform: translateX(-50%);

    background: #f6f7f9;
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.card {
    position: relative;
    background: #ffffff;
    border: 2.5px solid #1f2937;
    border-radius: 255px 18px 225px 20px / 20px 225px 18px 255px;
    padding: 56px 40px 48px;
    text-align: center;
}

/* เส้นที่สอง ขีดซ้ำเหลื่อมๆ ให้เหมือนวาดมือ */
.card::before {
    content: "";
    position: absolute;
    inset: -5px -3px -4px -6px;
    border: 1.5px solid rgba(31, 41, 55, 0.45);
    border-radius: 20px 225px 18px 255px / 255px 18px 225px 20px;
    transform: rotate(-0.6deg);
    pointer-events: none;
}

.icon {
    width: 112px;
    height: 112px;
    margin: 0 auto 24px;

    overflow: hidden;
    background: #ffffff;
    border: 2.5px solid #1f2937;
    border-radius: 30px 18px 28px 16px / 16px 28px 18px 30px;
    box-shadow: 4px 5px 0 rgba(17, 24, 39, 0.12);
    transform: rotate(-3deg);
}

.icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

h1 {
    text-wrap: balance;
    font-family: "Sriracha", "Mali", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 12px;
    color: #111827;
}

.subtitle {
    text-wrap: balance;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 32px;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 14px;
}

.contact-btn {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #374151;
}

.contact-btn-icon {
    position: relative;
    width: 100%;
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 2.5px solid #1f2937;
    border-radius: 22px 14px 24px 12px / 12px 24px 14px 22px;
    box-shadow: 3px 4px 0 rgba(17, 24, 39, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* เส้นที่สอง ขีดซ้ำเหลื่อมๆ */
.contact-btn-icon::before {
    content: "";
    position: absolute;
    inset: -4px -2px -3px -4px;
    border: 1px solid rgba(31, 41, 55, 0.4);
    border-radius: 14px 24px 12px 22px / 22px 12px 24px 14px;
    transform: rotate(1.5deg);
    pointer-events: none;
}

.contact-btn-icon svg {
    width: 58%;
    height: 58%;
}

.contact-btn:nth-child(odd) .contact-btn-icon  { transform: rotate(-3deg); }
.contact-btn:nth-child(even) .contact-btn-icon { transform: rotate(2.5deg); }

.contact-line .contact-btn-icon     { background: #06c755; }
.contact-facebook .contact-btn-icon { background: #1877f2; }
.contact-email .contact-btn-icon    { background: #fde68a; }
.contact-web .contact-btn-icon      { background: #bfdbfe; }
.contact-instagram .contact-btn-icon {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
}
.contact-tiktok .contact-btn-icon   { background: #111827; }
.contact-youtube .contact-btn-icon  { background: #ff0033; }

.contact-btn:hover .contact-btn-icon,
.contact-btn:focus-visible .contact-btn-icon {
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 4px 6px 0 rgba(17, 24, 39, 0.18);
}

.contact-btn:active .contact-btn-icon {
    transform: translateY(1px) rotate(-2deg);
    box-shadow: 1px 2px 0 rgba(17, 24, 39, 0.15);
}

.contact-btn:focus-visible {
    outline: none;
}

.contact-btn:focus-visible .contact-btn-label {
    text-decoration: underline wavy;
}

.contact-btn-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== บริการ (ส่วนเล็กในการ์ด) ===== */
.card-services {
    margin-top: 28px;
}

.card-services-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;

    font-family: "Sriracha", "Mali", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: #111827;
}

/* เส้นขีดมือสองข้างหัวข้อ */
.card-services-title::before,
.card-services-title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #1f2937;
    border-radius: 2px;
    opacity: 0.35;
}

.card-services-title::before { rotate: -1deg; }
.card-services-title::after  { rotate: 1.2deg; }

.service-btn .contact-btn-icon {
    border-width: 2px;
    box-shadow: 2px 3px 0 rgba(17, 24, 39, 0.12);
}

.service-btn .contact-btn-icon svg {
    width: 52%;
    height: 52%;
}

/* ใส่โลโก้แอปเป็นรูปได้เลย */
.service-btn .contact-btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.service-btn:nth-child(6n + 1) .contact-btn-icon { background: #fff7d6; }
.service-btn:nth-child(6n + 2) .contact-btn-icon { background: #e6f4e1; }
.service-btn:nth-child(6n + 3) .contact-btn-icon { background: #e0f0fd; }
.service-btn:nth-child(6n + 4) .contact-btn-icon { background: #fde4e6; }
.service-btn:nth-child(6n + 5) .contact-btn-icon { background: #ede9fe; }
.service-btn:nth-child(6n + 6) .contact-btn-icon { background: #ffedd5; }

.service-btn .contact-btn-label {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

.footer {
    margin-top: 28px;
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 480px) {
    :root {
        --gutter: 16px;
    }

    .container {
        margin-bottom: 56px;
    }

    .lanyard {
        height: 80px;
    }

    .card {
        padding: 48px 20px 36px;
    }

    .subtitle {
        font-size: 15px;
        margin-bottom: 26px;
    }

    .contact-links {
        gap: 14px 10px;
    }

    .contact-btn {
        width: 52px;
    }

    .contact-btn-label,
    .service-btn .contact-btn-label {
        font-size: 11px;
    }

    h1 {
        font-size: 26px;
    }

    .icon {
        width: 96px;
        height: 96px;
    }
}


/* ===== Moss ===== */
.moss {
    position: absolute;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
    animation: moss-grow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--grow-delay, 0ms) both;
}

.moss-up    { transform-origin: 50% 100%; }
.moss-down  { transform-origin: 50% 0; }
.moss-right { transform-origin: 0 50%; }
.moss-left  { transform-origin: 100% 50%; }

.moss-strands {
    position: absolute;
    z-index: 2;
    width: 220px;
    height: 0;
    pointer-events: none;
    animation: moss-fade 0.8s ease-out var(--grow-delay, 0ms) both;
}

.moss-strand {
    position: absolute;
    top: 0;
    overflow: visible;
    transform-origin: 50% 0;
    transform: rotate(var(--moss-sway, 0deg));
}

.moss-strand path,
.moss-strand ellipse {
    transform-box: view-box;
    transform-origin: 50% 0;
}

.moss-strand > * {
    animation: strand-wiggle 2.6s ease-in-out var(--strand-delay, 0s) infinite alternate;
}

@keyframes moss-grow {
    from { opacity: 0; scale: 0.2 0; }
    to   { opacity: 1; scale: 1 1; }
}

@keyframes moss-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes strand-wiggle {
    from { rotate: -4deg; }
    to   { rotate: 4deg; }
}

@media (prefers-reduced-motion: reduce) {
    .moss,
    .moss-strands,
    .moss-strand > * {
        animation: none;
    }
}


/* ===== Floor & cats ===== */
.floor {
    position: relative;
    width: calc(100% + var(--gutter) * 2);
    height: 120px;
    margin: auto calc(var(--gutter) * -1) 0;
    flex-shrink: 0;
    pointer-events: none;
}

.floor-ground {
    position: absolute;
    inset: 0;
    display: block;
}

.cat {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 90px;
    height: 80px;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
}

.cat-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.cat-bubble {
    position: absolute;
    left: 50%;
    bottom: 100%;
    padding: 2px 10px;

    font-family: "Sriracha", "Mali", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    white-space: nowrap;

    background: #fff;
    border: 2px solid #1f2937;
    border-radius: 14px 10px 14px 4px;

    opacity: 0;
    transform: translate(-50%, 6px) scale(0.6);
    pointer-events: none;
}

.cat-bubble.show {
    animation: cat-meow 1.3s ease-out;
}

@keyframes cat-meow {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
    15%  { opacity: 1; transform: translate(-50%, -4px) scale(1.05); }
    25%  { transform: translate(-50%, -4px) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -12px) scale(1); }
}

/* ===== Dried fish ===== */
.drying-line {
    position: absolute;
    z-index: 2;
    height: 0;
    pointer-events: none;
    animation: moss-fade 0.8s ease-out var(--grow-delay, 0ms) both;
}

.drying-line-rope {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
}

.dried-fish {
    position: absolute;
    overflow: visible;
    transform-origin: 50% 0;
    transform: rotate(var(--moss-sway, 0deg));
}

.dried-fish > g {
    transform-box: view-box;
    transform-origin: 16px 0;
    animation: dried-fish-sway 2.8s ease-in-out var(--fish-delay, 0s) infinite alternate;
}

@keyframes dried-fish-sway {
    from { rotate: -6deg; }
    to   { rotate: 6deg; }
}

@media (prefers-reduced-motion: reduce) {
    .drying-line,
    .dried-fish > g {
        animation: none;
    }
}