/* ===== CONTACT ===== */
.contact{position:relative;padding:150px 52px 140px;overflow:hidden;background:radial-gradient(ellipse 55% 55% at 18% 20%,rgba(30,80,40,.18) 0%,transparent 70%),radial-gradient(ellipse 45% 45% at 80% 35%,rgba(30,50,100,.16) 0%,transparent 70%),linear-gradient(180deg,rgba(7,10,20,.9) 0%,rgba(11,11,18,1) 100%)}
.contact{color:#e9f6ff}
.contact-shell{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.contact-header{max-width:720px;margin-bottom:40px}
.contact-kicker{font-family:'Outfit',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:rgba(47,175,249,.75)}
.contact-title{font-family:'Outfit',sans-serif;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;letter-spacing:-.02em;margin:14px 0 16px;background:linear-gradient(90deg,#2faff9,#b6ef09);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-subtitle{color:rgba(182,239,9,.7);line-height:1.8;font-size:1.05rem}

.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.contact-card{background:rgba(255,255,255,.03);border:1px solid transparent;border-radius:22px;padding:26px;backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.35);background-image:linear-gradient(rgba(10,12,20,.9),rgba(10,12,20,.9)),linear-gradient(120deg,rgba(47,175,249,.55),rgba(182,239,9,.35));background-origin:border-box;background-clip:padding-box,border-box}
.contact-card h2{font-family:'Outfit',sans-serif;font-size:1.2rem;letter-spacing:.06em;margin-bottom:18px;color:#f2fbff}
.contact-card h2::after{content:'';display:block;height:2px;width:80px;margin-top:10px;border-radius:999px;background:linear-gradient(90deg,#2faff9,#b6ef09)}

.contact-table{overflow:auto}
.contact-table table{width:100%;border-collapse:collapse;min-width:420px;border-radius:16px;overflow:hidden}
.contact-table th,.contact-table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem;color:#dfefff}
.contact-table th{font-family:'Outfit',sans-serif;color:#ffffff;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;background:linear-gradient(90deg,rgba(47,175,249,.35),rgba(182,239,9,.2))}
.contact-table tbody tr:nth-child(even) td{background:rgba(22,28,45,.45)}
.contact-table tbody tr:hover td{color:#fff;background:rgba(47,175,249,.14)}
.contact-table tr:last-child td{border-bottom:none}

.contact-deco{position:absolute;pointer-events:none;z-index:1;opacity:.7}
.contact-string{top:40px;left:6%;width:140px;opacity:.75;filter:drop-shadow(0 0 22px rgba(47,175,249,.45));animation:contactFloat 9s ease-in-out infinite}
.contact-star{width:12px;opacity:.7;animation:contactTwinkle 3.5s ease-in-out infinite}
.contact-star-1{top:120px;right:18%}
.contact-star-2{bottom:160px;left:20%;animation-delay:1.2s}
.contact-mesh{right:-12%;top:45%;width:45%;opacity:.45;filter:blur(.5px);animation:contactDrift 12s ease-in-out infinite}

@keyframes contactFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes contactTwinkle{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes contactDrift{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(-18px) rotate(3deg)}}

@media(max-width:1024px){
  .contact{padding:130px 28px 120px}
  .contact-grid{grid-template-columns:1fr}
  .contact-mesh{width:60%;right:-20%}
}

@media(max-width:768px){
  .contact{padding:110px 20px 110px}
  .contact-header{margin-bottom:28px}
  .contact-string{width:54px}
}

@media(max-width:480px){
  .contact{padding:100px 16px 100px}
  .contact-title{font-size:clamp(2.1rem,7vw,2.7rem)}
  .contact-card{padding:22px}
}