/* VIP Transfer page — gold accent on top of the base theme */
.gold, .gold-text { color: var(--gold); }
.vip-hero { padding-bottom: 90px; }
.vip-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; min-height: min(620px, 76vh); }
.vip-orb { background: rgba(255, 211, 106, .16); }
.vip-pill { border-color: rgba(255, 211, 106, .35); background: rgba(255, 211, 106, .07); color: #ffe9b0; }
.vip-pill .dot { background: var(--gold); animation: none; }
.vip-title .gold { font-size: 1.5em; background: linear-gradient(180deg, #fff3c4, var(--gold) 55%, #b98a2c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 50px rgba(255, 211, 106, .35)); }
.hero-sub strong { color: var(--green); }
.btn-gold { background: linear-gradient(180deg, #ffe08a, var(--gold)); color: #1a1200; box-shadow: 0 10px 40px -10px rgba(255, 211, 106, .6); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(255, 211, 106, .12), 0 16px 50px -10px rgba(255, 211, 106, .8); }

.dm-card { border-radius: 26px; border: 1px solid rgba(255, 211, 106, .3); background: rgba(10, 14, 12, .85); backdrop-filter: blur(14px); box-shadow: 0 40px 100px -40px rgba(255, 211, 106, .35); overflow: hidden; }
.dm-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dm-head b { display: block; font-size: 15px; } .dm-head span { font-size: 12px; color: var(--muted); }
.dm-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; background: linear-gradient(135deg, var(--green-2), #0a3d26); color: #fff; }
.dm-body { min-height: 210px; padding: 26px 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.dm-bubble.me { align-self: flex-end; padding: 12px 22px; border-radius: 22px 22px 6px 22px; background: #1d9bf0; color: #fff; font-weight: 700; font-size: 20px; letter-spacing: .04em; animation: pop .5s .4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.dm-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--card-2); animation: pop .4s 1.3s both; }
.dm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.dm-typing i:nth-child(2) { animation-delay: .15s; } .dm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.dm-foot code { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--gold); letter-spacing: .1em; }

.vip-step .step-n { -webkit-text-stroke-color: rgba(255, 211, 106, .5); }
.vip-step:hover { border-color: rgba(255, 211, 106, .35); }
.step-link { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--gold); }
.step-link:hover { text-decoration: underline; }
.step p b { color: var(--text); }

.vip-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--card); border: 1px solid var(--line); padding: 0 22px; transition: border-color .2s; }
.faq details[open] { border-color: rgba(255, 211, 106, .3); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 20px; color: var(--gold); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 20px; color: var(--muted); font-size: 15px; }
.faq p b, .faq p a { color: var(--text); } .faq p a { text-decoration: underline; }
.vip-cta { border-color: rgba(255, 211, 106, .3); background: radial-gradient(80% 120% at 50% 120%, rgba(255, 211, 106, .22), transparent 60%), var(--card); }

@media (max-width: 980px) { .vip-hero-inner, .vip-split { grid-template-columns: 1fr; gap: 32px; } }