/* Загальні стилі */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; }
body {
    min-height: 100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 20px;
    background: linear-gradient(135deg, #0b0b0b, #1c1c1c, #0b0b0b);
    background-size: 600% 600%;
    animation: bgGradient 30s ease infinite;
    color: #eee;
    scroll-behavior: smooth;
}
@keyframes bgGradient { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }

.card {
    background-color: #1a1a1a;
    padding: 50px 45px;
    border-radius: 25px;
    max-width: 650px;
    width: 100%;
    border: 1px solid rgba(255,215,0,0.2);
    box-shadow: 0 15px 50px rgba(0,0,0,0.85);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(255,215,0,0.5), 0 15px 50px rgba(0,0,0,0.85);
    border-color: rgba(255,215,0,0.5);
}
.card::before {
    content:"";
    position:absolute;
    top:0; left:-75%;
    width:50%; height:100%;
    background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.15), rgba(255,255,255,0));
    transform: skewX(-25deg);
    transition: all 0.6s ease;
    pointer-events:none;
}
.card:hover::before { left:125%; }

/* Parallax для фото */
.profile-pic { display: flex; justify-content:center; margin-bottom:25px; perspective:1000px; }
.profile-pic img {
    width:130px; height:130px; border-radius:50%;
    border:3px solid #FFD700;
    box-shadow:0 8px 25px rgba(0,0,0,0.7);
    object-fit:cover;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.profile-pic img:hover { transform: rotateY(10deg) rotateX(5deg) scale(1.05); box-shadow:0 12px 30px rgba(255,215,0,0.6); }

/* Заголовки та текст */
h1,h2,h4 {
    position: relative;
    display:inline-block;
    cursor: default;
    background: linear-gradient(90deg, #FFD700, #ffffff, #FFD700);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-size:200% 100%;
    text-shadow: 0 0 8px rgba(255,215,0,0.5);
    transition: background-position 0.5s;
}
h1:hover,h2:hover,h4:hover {
    animation: textShine 2s linear infinite;
}
@keyframes textShine { 0% { background-position:-300% 0; } 100% { background-position:300% 0; } }

h1 { font-size:3rem; text-align:center; font-weight:700; letter-spacing:2px; margin-bottom:12px; line-height:1.2; }
h1::after { content:""; display:block; width:80px; height:2px; background:#FFD700; margin:8px auto 0; border-radius:1px; }
h2 { font-size:1.7rem; text-align:center; font-weight:300; line-height:1.4; margin-bottom:30px; }
p { font-size:1.05rem; line-height:1.7; text-align:center; color:#d0d0d0; margin-bottom:18px; }

/* Послуги */
.services { display:flex; flex-direction:column; gap:20px; margin-top:30px; }
.service-card {
    display:flex; align-items:flex-start; gap:18px; padding:22px;
    border-radius:18px; background:#222; border:1px solid rgba(255,215,0,0.1);
    transition: all 0.3s; opacity:0; transform:translateY(25px);
}
.service-card.show { opacity:1; transform:translateY(0); }
.service-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,0.75); background:#262626; border-color:rgba(255,215,0,0.4); }
.service-card:hover .service-icon { animation: pulse 1s infinite alternate; }
@keyframes pulse { 0% { transform: scale(1.1); } 100% { transform: scale(1.2); } }

.service-icon { font-size:2.2rem; color:#FFD700; flex-shrink:0; transition: all 0.3s; background:linear-gradient(90deg,#FFD700,#fff,#FFD700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.service-card:hover .service-icon { color:#fff176; transform: scale(1.1); }

.service-text h4 { margin:0 0 6px 0; font-weight:500; cursor:pointer; }
.service-text p { margin:0; font-size:0.95rem; color:#ccc; }

/* Toggle контент з плавним slide-down */
.toggle-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, text-shadow 0.5s ease, padding 0.5s ease;
    font-size: 0.95rem;
    color: #ccc;
    margin-top: 0;
    padding: 0 5px;
}

/* Активний стан toggle */
.service-text.active .toggle-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 5px;
    padding: 5px;
    color: #fffacd;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    animation: glowText 0.8s ease forwards;
}
@keyframes glowText {
    0% { text-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.7); }
    100% { text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }
}
.service-text.active .toggle-title {
    color: #fff176;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
    transition: color 0.4s, text-shadow 0.4s;
}

/* Кнопки */
.contact-buttons { margin-top:30px; display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
.contact-btn {
    display:flex; align-items:center; gap:8px; padding:12px 22px;
    border-radius:25px; background:#FFD700; color:#0b0b0b;
    font-weight:500; text-decoration:none; font-size:1rem; transition: all 0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.4); cursor:pointer; position:relative; overflow:hidden;
}
.contact-btn:hover { transform:translateY(-3px) scale(1.05); background:#fff176; box-shadow:0 8px 25px rgba(255,215,0,0.5); }
.download-btn::after {
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background: rgba(255,255,255,0.15); transform: skewX(-25deg); transition: all 0.6s ease;
}
.download-btn:hover::after { left:125%; background:rgba(255,255,255,0.25); }

/* Соц. кнопки */
.socials { margin-top:20px; display:flex; justify-content:center; gap:20px; }
.socials a {
    display:flex; align-items:center; justify-content:center; width:45px; height:45px;
    border-radius:50%; background:#222; color:#FFD700; font-size:1.2rem;
    text-decoration:none; transition: all 0.4s; box-shadow:0 4px 12px rgba(0,0,0,0.5); position:relative; overflow:hidden;
}
.socials a::after {
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; background:rgba(255,255,255,0.12);
    transform:skewX(-25deg); pointer-events:none; transition: all 0.6s ease;
}
.socials a:hover::after { left:125%; background:rgba(255,255,255,0.25); }
.socials a:hover { transform: scale(1.2) rotate(5deg); color:#fff176; box-shadow:0 8px 20px rgba(255,215,0,0.6); }

/* Footer */
footer { margin-top:28px; text-align:center; color:#999; font-size:0.9rem; opacity:0; transform:translateY(20px); transition:all 0.5s; }
footer.show { opacity:1; transform:translateY(0); }