*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

 :root {
 --bg-deep: #050510;
 --bg-mid: #0a0a20;
 --neon-blue: #00d4ff;
 --neon-purple: #a855f7;
 --neon-pink: #ec4899;
 --glass-bg: rgba(255,255,255,0.04);
 --glass-border: rgba(255,255,255,0.08);
 }

 body {
 font-family: 'Inter', sans-serif;
 background: var(--bg-deep);
 color: #e0e0f0;
 overflow-x: hidden;
 min-height: 100vh;
 }


 #bgCanvas {
 position: fixed;
 top: 0; left: 0;
 width: 100%; height: 100%;
 z-index: 0;
 pointer-events: none;
 }


 .contacts-section {
 position: relative;
 z-index: 1;
 padding: 120px 24px 80px;
 max-width: 1200px;
 margin: 0 auto;
 }

 .page-header {
 text-align: center;
 margin-bottom: 60px;
 }
 .page-header h1 {
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(42px, 6vw, 72px);
 font-weight: 700;
 background: linear-gradient(135deg, #fff, var(--neon-blue), var(--neon-purple));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 margin-bottom: 12px;
 }
 .page-header p {
 font-size: 18px;
 color: rgba(255,255,255,0.6);
 max-width: 520px;
 margin: 0 auto;
 }

 .contacts-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 gap: 28px;
 margin-bottom: 80px;
 }

 .contact-card {
 background: rgba(15,15,40,0.7);
 backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 padding: 32px;
 transition: all 0.4s;
 }
 .contact-card:hover {
 border-color: var(--neon-purple);
 box-shadow: 0 0 40px rgba(168,85,247,0.2);
 transform: translateY(-8px);
 }

 .card-icon {
 width: 64px; height: 64px;
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 32px;
 margin-bottom: 20px;
 background: rgba(255,255,255,0.05);
 }

 .contact-card h3 {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 22px;
 margin-bottom: 12px;
 }

 .contact-link {
 color: var(--neon-blue);
 text-decoration: none;
 font-weight: 500;
 transition: all 0.3s;
 }
 .contact-link:hover {
 color: #fff;
 text-shadow: 0 0 15px var(--neon-blue);
 }


 .form-container {
 background: rgba(15,15,40,0.7);
 backdrop-filter: blur(20px);
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 padding: 40px;
 max-width: 720px;
 margin: 0 auto;
 }

 .form-container h2 {
 font-family: 'Space Grotesk', sans-serif;
 text-align: center;
 margin-bottom: 30px;
 font-size: 28px;
 }

 .form-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 }
 @media (max-width: 640px) {
 .form-grid { grid-template-columns: 1fr; }
   .contacts-grid { 
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      }
 }

 input, textarea {
 width: 100%;
 padding: 14px 18px;
 background: rgba(255,255,255,0.04);
 border: 1px solid var(--glass-border);
 border-radius: 12px;
 color: #fff;
 font-family: 'Inter', sans-serif;
 outline: none;
 transition: all 0.3s;
 }
 input:focus, textarea:focus {
 border-color: var(--neon-blue);
 box-shadow: 0 0 20px rgba(0,212,255,0.15);
 }

 textarea { min-height: 140px; resize: vertical; }

 .submit-btn {
 width: 100%;
 margin-top: 20px;
 padding: 16px;
 background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
 border: none;
 border-radius: 12px;
 color: #fff;
 font-size: 16px;
 font-weight: 700;
 font-family: 'Space Grotesk', sans-serif;
 cursor: pointer;
 transition: all 0.4s;
 }
 .submit-btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 0 50px rgba(0,212,255,0.5);
 }

 .socials {
 display: flex;
 justify-content: center;
 gap: 16px;
 margin-top: 40px;
 flex-wrap: wrap;
 }
 .socials a {
 width: 52px; height: 52px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 border-radius: 14px;
 transition: all 0.3s;
 }
 .socials a:hover {
 background: rgba(168,85,247,0.15);
 border-color: var(--neon-purple);
 transform: scale(1.1);
 }