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

body {
 font-family:'Inter', sans-serif;
 background:linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #1a1a2e 100%);
 background-size:400% 400%;
 animation:gradientShift 40s ease infinite;
 color:#e0e0e0;
 display:flex;
 justify-content:center;
 align-items:center;
 min-height:100vh;
 overflow:hidden;
 position:relative;
}

a{
    text-decoration: none;
}

@keyframes gradientShift {
 0% {background-position:0% 50%, 0% 50%, 0% 50%, 0% 50%;}
 33% {background-position:100% 50%, 100% 50%, 100% 50%, 100% 50%;}
 66% {background-position:100% 100%, 100% 100%, 100% 100%, 100% 100%;}
 100% {background-position:0% 50%, 0% 50%, 0% 50%, 0% 50%;}
}

@keyframes particleFloat {
 0%, 100% {transform:translateY(0px);}
 50% {transform:translateY(-20px);}
}

.container {
 perspective:1200px;
}

.card {
 background:rgba(255, 255, 255, 0.05);
 border-radius:30px;
 padding:0;
 box-shadow:
 20px 20px 40px rgba(0, 0, 0, 0.3),
 -20px -20px 40px rgba(255, 255, 255, 0.02),
 inset 0 1px 0 rgba(255, 255, 255, 0.1),
 inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 backdrop-filter:blur(25px);
 -webkit-backdrop-filter:blur(25px);
 border:1px solid rgba(255, 255, 255, 0.1);
 max-width:500px;
 width:90%;
 transform-style:preserve-3d;
 transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 position:relative;
 overflow:hidden;
}

.card:hover {
 box-shadow:
 30px 30px 60px rgba(0, 0, 0, 0.4),
 -30px -30px 60px rgba(255, 255, 255, 0.03);
}

.avatar-section {
 padding:40px 40px 20px;
 text-align:center;
}

.avatar {
 position:relative;
 display:inline-block;
}

.avatar img {
 width:150px;
 height:150px;
 border-radius:50%;
 border:4px solid rgba(24, 113, 255, 0.3);
 object-fit:cover;
 box-shadow:
 0 10px 30px rgba(0, 0, 0, 0.3),
 0 0 0 10px rgba(255, 255, 255, 0.05),
 inset 0 2px 0 rgba(255, 255, 255, 0.1);
 transition:all 0.4s ease;
 position:relative;
 z-index:2;
}

.avatar-glow {
 position:absolute;
 top:-10px;
 left:-10px;
 width:170px;
 height:170px;
 border-radius:50%;
 background:radial-gradient(circle, rgba(24, 113, 255, 0.3) 0%, transparent 70%);
 animation:glowPulse 3s ease-in-out infinite;
 z-index:1;
}

@keyframes glowPulse {
 0%, 100% {opacity:0.5;transform:scale(1);}
 50% {opacity:1;transform:scale(1.1);}
}

.avatar img:hover {
 transform:scale(1.1);
 box-shadow:
 0 15px 40px rgba(24, 113, 255, 0.4),
 0 0 0 15px rgba(255, 255, 255, 0.08),
 inset 0 3px 0 rgba(255, 255, 255, 0.15);
}

.content {
 padding:20px 40px 40px;
}

h1 {
 font-size:2.8em;
 font-weight:700;
 margin-bottom:8px;
 background:linear-gradient(135deg, #1871ff, #00d4ff);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 text-shadow:0 0 20px rgba(24, 113, 255, 0.3);
}

.subtitle {
 font-size:1.2em;
 font-weight:500;
 color:#b0b0b0;
 margin-bottom:15px;
 font-style:italic;
}

.description {
 font-size:1em;
 line-height:1.6;
 color:#d0d0d0;
 margin-bottom:25px;
 opacity:0.9;
}

.skills {
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-bottom:30px;
 justify-content:center;
}

.skill {
 background:rgba(24, 113, 255, 0.1);
 color:#1871ff;
 padding:8px 16px;
 border-radius:20px;
 font-size:0.9em;
 font-weight:500;
 border:1px solid rgba(24, 113, 255, 0.3);
 transition:all 0.3s ease;
}

.skill:hover {
 background:rgba(24, 113, 255, 0.2);
 transform:translateY(-2px);
 box-shadow:0 5px 15px rgba(24, 113, 255, 0.3);
}

.contacts {
 display:grid;
 grid-template-columns:1fr;
 gap:20px;
}

.contact-link {
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:rgba(255, 255, 255, 0.08);
 border-radius:20px;
 text-decoration:none;
 color:#e0e0e0;
 transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 font-size:1.1em;
 font-weight:500;
 border:1px solid rgba(255, 255, 255, 0.1);
 box-shadow:
 8px 8px 16px rgba(0, 0, 0, 0.2),
 -8px -8px 16px rgba(255, 255, 255, 0.02);
 position:relative;
 overflow:hidden;
}

.contact-link::before {
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg, transparent, rgba(24, 113, 255, 0.2), transparent);
 transition:left 0.6s;
}

.contact-link:hover::before {
 left:100%;
}

.contact-link:hover {
 transform:translateY(-5px) scale(1.02);
 box-shadow:
 12px 12px 24px rgba(0, 0, 0, 0.3),
 -12px -12px 24px rgba(255, 255, 255, 0.03),
 0 0 20px rgba(24, 113, 255, 0.3);
 background:rgba(255, 255, 255, 0.12);
}

.telegram {
 background:linear-gradient(135deg, rgba(24, 113, 255, 0.15), rgba(0, 212, 255, 0.15));
 border:1px solid rgba(24, 113, 255, 0.4);
 box-shadow:
 8px 8px 16px rgba(24, 113, 255, 0.2),
 -8px -8px 16px rgba(255, 255, 255, 0.02);
}

.telegram:hover {
 box-shadow:
 12px 12px 24px rgba(24, 113, 255, 0.4),
 -12px -12px 24px rgba(255, 255, 255, 0.03),
 0 0 30px rgba(24, 113, 255, 0.5);
 background:linear-gradient(135deg, rgba(24, 113, 255, 0.2), rgba(0, 212, 255, 0.2));
}

.icon {
 margin-right:15px;
 display:flex;
 align-items:center;
 transition:transform 0.3s ease;
}

.icon svg {
 width:24px;
 height:24px;
}

.contact-link:hover .icon {
 transform:scale(1.2);
}

.text {
 font-weight:600;
}

/* Адаптивность */
@media (max-width:768px) {
 .card {
 max-width:90%;
 margin:20px;
}
 .card:hover {
 transform:none;
}
 .avatar-section {
 padding:30px 30px 15px;
}
 .avatar img {
 width:120px;
 height:120px;
}
 .content {
 padding:15px 30px 30px;
}
 h1 {
 font-size:2.2em;
}
 .contacts {
 gap:15px;
}
 .contact-link {
 padding:18px;
 font-size:1em;
}
}

@media (max-width:480px) {
 .avatar img {
 width:100px;
 height:100px;
}
 h1 {
 font-size:1.8em;
}
 .subtitle {
 font-size:1em;
}
 .description {
 font-size:0.9em;
}
 .skills {
 gap:8px;
}
 .skill {
 padding:6px 12px;
 font-size:0.8em;
}
}

.footer {
 padding:20px;
 text-align:center;
 border-top:1px solid rgba(255, 255, 255, 0.1);
 margin-top:20px;
}

.footer p {
 font-size:0.8em;
 color:#a0a0a0;
 margin:0;
}