:root{
  --radius:12px;
  --bg-dark: linear-gradient(135deg,#1847a5,#161a29,#5e11d9,#00ff6a);
  --text-dark: #00ffee;
  --accent-dark: #00ff91;
  --muted-dark: #0dff00;
  --card-dark: rgba(255,255,255,0.04);
  --glass-dark: rgba(255,255,255,0.03);

  /* Light theme */
  --bg-light: linear-gradient(135deg,#dfffe6,#b4f3ff);
  --text-light: #1f2937;
  --accent-light: #00ff9d;
  --muted-light: #6b7280;
  --card-light: rgba(255,255,255,0.6);
  --glass-light: rgba(255,255,255,0.5);
}

/* Theme selection */
:root[data-theme="dark"]{
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --accent: var(--accent-dark);
  --muted: var(--muted-dark);
  --card: var(--card-dark);
  --glass: var(--glass-dark);
}
:root[data-theme="light"]{
  --bg: var(--bg-light);
  --text: var(--text-light);
  --accent: var(--accent-light);
  --muted: var(--muted-light);
  --card: var(--card-light);
  --glass: var(--glass-light);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background: var(--bg);
  background-size:400% 400%;
  animation: gradientMove 12s ease infinite;
  color: var(--text);
  line-height:1.5;
}

.gradient-text{
  background: linear-gradient(90deg,#00ff15,#33ff00,#81c784,#0059ff,#00ffbb);
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: textGradient 6s ease infinite;
}

@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes textGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Layout */
.container{width:90%;max-width:1100px;margin:0 auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;font-size:1.2rem;color:var(--accent);letter-spacing:0.6px}
.actions{display:flex;align-items:center;gap:16px;position:relative}
.nav-links{list-style:none;display:flex;gap:18px}
.nav-links a{color:var(--text);text-decoration:none;font-weight:500;font-size:0.95rem;opacity:0.92;transition:all .25s}
.nav-links a:hover{color:var(--accent);transform:translateY(-2px)}
.icon-btn{position:relative;background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:10px;cursor:pointer;font-size:16px;color:var(--text);z-index:100}

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;padding:60px 0;gap:30px;flex-wrap:wrap}
.hero-left{flex:1;min-width:280px;max-width:640px;opacity:0;transform:translateY(20px);transition:all .8s ease}
.hero-left.inview{opacity:1;transform:none}
.hero-text-box{display:flex;flex-direction:column;gap:16px;background:rgba(0,128,0,0.05);padding:30px 40px;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.15)}
.intro{font-size:2rem;font-weight:600}
.lead{color:var(--muted);font-size:1.05rem}
.cta-row{display:flex;align-items:center;gap:12px}
.btn{background:linear-gradient(90deg,var(--accent),#00ff9d);padding:10px 16px;border-radius:12px;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 8px 24px rgba(255,111,97,0.12);transition:transform .2s ease}
.btn:hover{transform:translateY(-4px)}

/* Avatar */
.avatar-wrap{width:300px;height:300px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,0.6);opacity:0;transform:translateY(20px);transition:all .9s ease}
.avatar-wrap.inview{opacity:1;transform:none}
.avatar{width:100%;height:100%;object-fit:cover;border-radius:16px;border:4px solid rgba(255,111,97,0.08);box-shadow:0 8px 30px rgba(255,111,97,0.12)}

/* Sections */
.about, .projects, .resume-section, .contact, .social-section{padding:60px 0}

.about-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:center;opacity:0;transform:translateY(20px);transition:all .7s ease}
.about-grid.inview{opacity:1;transform:none}
.about-text-box{background:rgba(0,50,50,0.2);padding:30px 40px;border-radius:24px;box-shadow:0 8px 40px rgba(0,0,0,0.25)}

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.project-card{background:var(--card);padding:14px;border-radius:12px;transition:transform .28s,box-shadow .28s;opacity:0;transform:translateY(18px)}
.project-card.inview{opacity:1;transform:none}
.project-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(255,111,97,0.08)}
.project-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}

.resume-section{max-width:900px;margin:0 auto;background:rgba(0,128,0,0.05);padding:40px 30px;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.15)}
.resume-section h2{margin-bottom:20px;color:var(--accent)}

.contact{text-align:center;background:linear-gradient(180deg,rgba(0,255,0,0.02),rgba(0,255,0,0.05))}
#contactForm{max-width:560px;margin:18px auto 0;display:flex;flex-direction:column;gap:12px}
#contactForm input,#contactForm textarea{padding:12px;border-radius:10px;border:none;background:var(--glass);color:var(--text)}
#contactForm input:focus,#contactForm textarea:focus{outline:2px solid rgba(255,111,97,0.18)}

.social-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:19px 25px;background:rgba(0,128,128,0.07);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.15)}
.social-box .social-compact{display:flex;gap:30px}
.social-box .social-compact a img{width:70px;height:70px;transition:transform .2s ease}
.social-box .social-compact a:hover img{transform:scale(1.15)}

.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:50px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:15px}

/* Responsive */
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.avatar-wrap{width:260px;height:260px}}
@media (max-width:700px){.nav-links{display:none}.avatar-wrap{width:220px;height:220px}.intro{font-size:1.6rem}.hero{padding:40px 0}.footer-inner{flex-direction:column;gap:8px}}






/* Telegram button in Contact Section */
.telegram-btn{
  display:inline-block;
  margin-top:16px;
  padding:12px 22px;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(90deg,#00ff91,#00cfff);
  border-radius:12px;
  text-decoration:none;
  transition:all 0.3s ease;
  box-shadow:0 6px 20px rgba(0,255,145,0.2);
}

.telegram-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 24px rgba(0,255,145,0.35);
}