.contact-page {
        min-height: calc(100vh - var(--app-header-h) - var(--app-footer-h));
        padding: clamp(8px, 1.6vw, 14px);
        background: transparent;
        color: #eef2f7;
    }

    .contact-shell {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(280px, 380px) 1fr;
        gap: 18px;
    }

    .contact-card {
        background: linear-gradient(160deg, rgba(42, 45, 52, 0.94), rgba(24, 27, 33, 0.95));
        border: 1px solid rgba(244, 198, 89, 0.52);
        border-radius: 12px;
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 194, 0.14),
            inset 0 -1px 0 rgba(8, 10, 15, 0.62),
            0 10px 24px rgba(7, 9, 14, 0.34),
            0 0 8px rgba(246, 201, 95, 0.18);
    }

    .profile-card {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .profile-image {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(246, 201, 95, 0.5);
        background: #1f2531;
        object-fit: cover;
        aspect-ratio: 4 / 3;
    }

    .profile-name {
        margin: 0;
        font-size: clamp(24px, 3vw, 30px);
        color: #ffe0a0;
        line-height: 1.1;
    }

    .profile-role {
        margin: 0;
        color: #c9d2de;
        opacity: 0.95;
    }

    .profile-bio {
        margin: 0;
        color: #dde4ef;
        line-height: 1.6;
    }

    .contact-block {
        margin-top: 8px;
        border-top: 1px solid rgba(246, 201, 95, 0.25);
        padding-top: 12px;
        display: grid;
        gap: 10px;
    }

    .contact-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .contact-row strong {
        color: #f7d99c;
    }

    .reveal-btn {
        border: 1px solid rgba(246, 201, 95, 0.62);
        color: #ffe4ac;
        background: linear-gradient(180deg, rgba(73, 82, 98, 0.44), rgba(44, 50, 62, 0.48));
        border-radius: 8px;
        padding: 7px 11px;
        cursor: pointer;
        font-size: 13px;
    }

    .reveal-btn:hover {
        border-color: rgba(251, 212, 115, 0.86);
        box-shadow: 0 0 14px rgba(247, 197, 82, 0.3);
    }

    .revealed-link {
        color: #ffe1a2;
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 0.01em;
        word-break: break-all;
    }

    .content-card {
        padding: 22px;
        display: grid;
        gap: 18px;
    }

    .content-card h2 {
        margin: 0;
        color: #ffe0a0;
    }

    .content-card p {
        margin: 0;
        color: #dbe3ef;
        line-height: 1.65;
    }

    .mini-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        gap: 12px;
    }

    .mini-item {
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        padding: 12px;
    }

    .mini-item h3 {
        margin: 0 0 6px;
        color: #f6d89d;
        font-size: 15px;
    }

    .mini-item p {
        margin: 0;
        font-size: 14px;
        color: #d2dbe9;
    }

    .dummy-form {
        display: grid;
        gap: 10px;
    }

    .dummy-form label {
        font-size: 13px;
        color: #e5ecf7;
    }

    .dummy-form input,
    .dummy-form textarea {
        width: 100%;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(0, 0, 0, 0.22);
        color: #f2f5fb;
        padding: 9px 10px;
        font: inherit;
    }

    .dummy-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    .dummy-submit {
        justify-self: start;
        border: 1px solid rgba(246, 201, 95, 0.62);
        color: #ffe4ac;
        background: linear-gradient(180deg, rgba(73, 82, 98, 0.44), rgba(44, 50, 62, 0.48));
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .form-status {
        border-radius: 8px;
        border: 1px solid rgba(109, 202, 143, 0.55);
        background: rgba(109, 202, 143, 0.12);
        color: #d5ffe0;
        padding: 10px 12px;
        font-size: 14px;
    }

    .form-errors {
        border-radius: 8px;
        border: 1px solid rgba(255, 117, 117, 0.65);
        background: rgba(255, 117, 117, 0.14);
        color: #ffe2e2;
        padding: 10px 12px;
        font-size: 14px;
    }

    .hp-field {
        display: none !important;
    }

    @media (max-width: 900px) {
        .contact-shell {
            grid-template-columns: 1fr;
        }

        .mini-grid {
            grid-template-columns: 1fr;
        }
    }