﻿.nav-contact{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;transition:all .1s;padding:0;position:absolute;left:50%;transform:translateX(-50%)}
.nav-contact:hover .nav-bolt-svg{filter:brightness(1.3) drop-shadow(0 0 12px rgba(14,165,233,.4))}
.nav-contact:hover .nav-bolt-text{color:rgba(56,189,248,.8)}
.nav-bolt-text{font-size:.6rem;font-weight:900;letter-spacing:3px;color:rgba(56,189,248,.5);font-family:inherit;transition:color .1s}
.nav-bolt-svg{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(14,165,233,.3));transition:filter .1s}
.contact-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.88);display:none;justify-content:center;align-items:center;padding:2rem}
.contact-overlay.open{display:flex}
.contact-modal{background:#0a0f1c;border:1px solid rgba(56,189,248,.08);border-radius:20px;padding:52px 44px 44px;max-width:580px;width:100%;position:relative;overflow:hidden;animation:contactSlideUp .35s cubic-bezier(.16,1,.3,1)}
@keyframes contactSlideUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.contact-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:none;border:none;color:rgba(255,255,255,.2);font-size:1.1rem;cursor:pointer;transition:color .2s;display:flex;align-items:center;justify-content:center}
.contact-close:hover{color:#fff}
.contact-bg{position:absolute;top:50%;right:-20px;transform:translateY(-50%);width:200px;height:auto;opacity:.04;pointer-events:none}
.contact-title{font-size:2.2rem;font-weight:900;letter-spacing:-1.5px;color:#fff;margin-bottom:10px;text-align:center;position:relative;z-index:1}
.ct-word{display:inline-block;animation:ctPulse 3s ease-in-out infinite}
.ct-w1{animation-delay:.5s}.ct-w2{animation-delay:.9s}.ct-w3{animation-delay:1.3s}
@keyframes ctPulse{0%,20%{transform:scale(1);color:#fff}8%{transform:scale(1.4);color:#38bdf8}14%{transform:scale(1);color:#fff}100%{transform:scale(1);color:#fff}}
.contact-desc{font-size:.95rem;color:rgba(255,255,255,.45);margin-bottom:36px;line-height:1.7;text-align:center;position:relative;z-index:1}
.cd-w{display:inline-block;animation:cdWave 3s ease-in-out infinite}
.cd1{animation-delay:1.7s}.cd2{animation-delay:1.82s}.cd3{animation-delay:1.94s}.cd4{animation-delay:2.06s}.cd5{animation-delay:2.18s}.cd6{animation-delay:2.3s}.cd7{animation-delay:2.42s}.cd8{animation-delay:2.54s}.cd9{animation-delay:2.66s}.cd10{animation-delay:2.78s}
@keyframes cdWave{0%,100%{color:rgba(255,255,255,.45)}5%{color:#38bdf8}15%{color:rgba(255,255,255,.45)}}
.contact-cards{display:flex;gap:10px}
.contact-card{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px 16px;border-radius:14px;background:rgba(255,255,255,.03);text-decoration:none;transition:all .1s;position:relative}
.contact-card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
/* Dynamic-invite states */
.contact-card.loading{cursor:wait}
.contact-card.loading::after{content:'';position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(56,189,248,.25);border-top-color:#38bdf8;animation:srInviteSpin .6s linear infinite}
@keyframes srInviteSpin{to{transform:rotate(360deg)}}
.contact-card.rate-limited{opacity:.5;cursor:not-allowed}
.contact-card.rate-limited:hover{transform:none;background:rgba(255,255,255,.03)}
.contact-icon-wrap{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.contact-card:nth-child(1) .contact-icon-wrap{background:rgba(0,136,204,.12)}
.contact-card:nth-child(2) .contact-icon-wrap{background:rgba(56,189,248,.1)}
.contact-card:nth-child(3) .contact-icon-wrap{background:rgba(34,211,238,.1)}
.contact-icon{width:22px;height:22px}
.contact-card:nth-child(1) .contact-icon{color:#0088cc}
.contact-card:nth-child(2) .contact-icon{color:#38bdf8}
.contact-card:nth-child(3) .contact-icon{color:#22d3ee}
.contact-card-body{min-width:0}
.contact-card-title{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:4px}
.contact-card-desc{font-size:.7rem;color:rgba(255,255,255,.35);line-height:1.5}
.contact-card-arrow{display:none}
@media(max-width:600px){.contact-modal{padding:36px 24px 32px;max-width:100%}.contact-title{font-size:1.6rem}.contact-cards{flex-direction:column}}
