body.contact-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 4%, rgba(168, 85, 247, .12), transparent 28rem),
        #f8fafc;
    color: #1e293b;
}

.contact-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #1e0a30 0%, #4a1d63 58%, #6d2c91 100%);
    color: #fff;
}

.contact-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.contact-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.contact-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 42px rgba(51, 20, 71, .08);
}

.contact-label {
    display: block;
    margin-bottom: .4rem;
    color: #475569;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.contact-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .8rem;
    background: #fff;
    color: #1e293b;
    padding: .78rem .9rem;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-input:focus {
    border-color: #6d2c91;
    outline: none;
    box-shadow: 0 0 0 4px rgba(109, 44, 145, .11);
}

textarea.contact-input {
    min-height: 11rem;
    resize: vertical;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 0;
    border-radius: .85rem;
    background: #6d2c91;
    color: #fff;
    padding: .85rem 1.25rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 9px 24px rgba(109, 44, 145, .22);
    transition: background .15s ease, transform .15s ease;
}

.contact-button:hover { background: #4a1d63; transform: translateY(-1px); }
.contact-button:disabled { cursor: wait; opacity: .6; transform: none; }

.contact-status {
    border-radius: .85rem;
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 650;
}

.contact-status.success { border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; }
.contact-status.error { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }

.faq-item {
    border-bottom: 1px solid #e2e8f0;
}

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

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    color: #334155;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: #6d2c91; font-size: 1.35rem; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: -.25rem 0 1rem; color: #64748b; line-height: 1.7; }

.ticket-message {
    max-width: min(88%, 48rem);
    border-radius: 1rem;
    padding: .9rem 1rem;
}

.ticket-message.customer {
    margin-left: auto;
    background: #6d2c91;
    color: #fff;
    border-bottom-right-radius: .25rem;
}

.ticket-message.admin {
    margin-right: auto;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: .25rem;
}

.ticket-message-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.ticket-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .35rem .7rem;
    background: #f3e8ff;
    color: #6d2c91;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .contact-shell { width: min(100% - 1rem, 1180px); }
    .contact-card { border-radius: 1.05rem; }
    .ticket-message { max-width: 96%; }
    .contact-hero { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; border-radius: 0 0 28px 28px; }
    .contact-hero h1 { font-size: 2.3rem !important; line-height: 1.05; }
    .contact-shell.py-10 { padding-top: 1rem !important; padding-bottom: 2rem !important; }
    .contact-card { padding: 1rem !important; box-shadow: 0 7px 24px rgba(51,20,71,.09); }
    .contact-card h2 { font-size: 1.45rem !important; }
    .contact-button { width: 100%; min-height: 50px; }
    .faq-item summary { min-height: 52px; }
}