/* =================================================
   CONTACT PAGE — SOCIAL CASINO PREMIUM (v3)
   ================================================= */

/* PAGE ATMOSPHERE */
body.contact-page{
    background:
        radial-gradient(1400px 700px at 10% -10%, rgba(214,179,90,0.14), transparent 55%),
        radial-gradient(1000px 600px at 90% 0%, rgba(177,18,38,0.14), transparent 60%),
        linear-gradient(180deg, #0A0D0B, #060806);
    color: rgba(255,255,255,0.92);
    min-height: 100vh;
}

/* MAIN */
.contact--casino{
    padding: 96px 16px 120px;
}

/* WIDTH */
.contact__wrap{
    max-width: 980px;
    margin: 0 auto;
}

/* =================================================
   HERO
   ================================================= */
.contactHero{
    text-align: center;
    margin-bottom: 72px;
    position: relative;
}

.contactHero::after{
    content:"";
    display:block;
    width: 140px;
    height: 6px;
    margin: 26px auto 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
        rgba(214,179,90,0),
        rgba(214,179,90,0.9),
        rgba(177,18,38,0.9),
        rgba(214,179,90,0)
        );
    opacity: .85;
}

.contactHero__eyebrow{
    display: inline-block;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.contactHero__title{
    margin: 0;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
}

.contactHero__subtitle{
    margin: 18px auto 0;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
}

/* =================================================
   GRID
   ================================================= */
.contactGrid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 34px;
}

/* =================================================
   CARDS — PREMIUM GLASS
   ================================================= */
.contactCard{
    position: relative;
    padding: 38px 34px;
    border-radius: 26px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.02)
        ),
        rgba(18,22,19,0.85);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
    box-shadow:
        0 28px 90px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.10);
    overflow: hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* ambient glow layer */
.contactCard::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(
            circle at top,
            rgba(214,179,90,0.25),
            transparent 55%
        );
    opacity:.25;
    pointer-events:none;
}

/* shine sweep */
.contactCard::after{
    content:"";
    position:absolute;
    top:-60%;
    left:-120%;
    width:200%;
    height:200%;
    background:
        linear-gradient(
            110deg,
            transparent 45%,
            rgba(255,255,255,0.12) 50%,
            transparent 55%
        );
    opacity:0;
    transition: opacity .2s ease, transform .8s ease;
}

.contactCard::before,
.contactCard::after{
    pointer-events: none;
}


/* Hover state */
.contactCard:hover{
    transform: translateY(-6px);
    border-color: rgba(214,179,90,0.45);
    box-shadow:
        0 40px 120px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.14);
}

.contactCard:hover::after{
    opacity:1;
    transform: translateX(60%);
}

/* =================================================
   CARD CONTENT
   ================================================= */
.contactCard__title{
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.96);
}

.contactCard__desc{
    margin: 0 0 24px;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
}

/* =================================================
   CTA — AUTHORITY LINK
   ================================================= */
.contactCard__cta{
    font-weight: 800;
    font-size: 14px;
    color: var(--gold-hi);
    text-decoration: none;
    position: relative;
}

.contactCard__cta::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:100%;
    height:2px;
    background:
        linear-gradient(90deg,
        rgba(214,179,90,0),
        rgba(214,179,90,0.9),
        rgba(214,179,90,0)
        );
    opacity:.6;
}

.contactCard__cta:hover{
    color:#fff;
}

/* =================================================
   FOOTER NOTE
   ================================================= */
.contactFooterNote{
    margin-top: 84px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255,255,255,0.62);
}

.contactFooterNote__muted{
    margin-top: 10px;
    color: rgba(255,255,255,0.42);
}

/* =================================================
   MOBILE
   ================================================= */
@media (max-width: 520px){
    .contact--casino{
        padding: 72px 14px 96px;
    }

    .contactHero{
        margin-bottom: 56px;
    }
}


/* =================================================
   CONTACT FAQ — MICRO, PREMIUM
   ================================================= */

.contactFAQ{
    margin-top: 80px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.contactFAQ__title{
    margin-bottom: 28px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.95);
}

.contactFAQ__list{
    display: grid;
    gap: 14px;
}

.contactFAQ__item{
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

.contactFAQ__item summary{
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
}

.contactFAQ__item summary::-webkit-details-marker{
    display: none;
}

.contactFAQ__item p{
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
}

/* =================================================
   FAQ — SMOOTH OPEN / CLOSE
   ================================================= */

.contactFAQ__content{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height .45s ease,
        opacity .35s ease,
        transform .35s ease;
}

/* when open */
.contactFAQ__item[open] .contactFAQ__content{
    max-height: 300px; /* safely larger than content */
    opacity: 1;
    transform: translateY(0);
}

/* summary interaction polish */
.contactFAQ__item summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* subtle indicator arrow */
.contactFAQ__item summary::after{
    content: "›";
    font-size: 18px;
    transform: rotate(90deg);
    transition: transform .3s ease, opacity .3s ease;
    opacity: .6;
}

/* rotate arrow when open */
.contactFAQ__item[open] summary::after{
    transform: rotate(-90deg);
    opacity: .9;
}

/* micro hover */
.contactFAQ__item summary:hover{
    color: #fff;
}