:root {
  --bg1:#071229; --bg2:#002147; --accent1:#00c6ff; --accent2:#0072ff;
  --card-bg: rgba(255,255,255,0.03);
}

html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: 'Poppins', sans-serif; color: #fff;
  background: linear-gradient(-45deg, var(--bg1), var(--bg2), #003b66, #00509e);
  background-size: 400% 400%; animation: gradientShift 8s ease infinite;
  background-attachment: fixed;
}

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

/* Splash logo */
.logo-container { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .6s cubic-bezier(.2,.9,.2,1);z-index:1000; }
.logo-container.shrink { top:18px;left:22px;transform:scale(.38); }
svg.logo { width:110px;height:110px; }
.logo .outline { animation:drawOutline 2s ease-in-out forwards; }
@keyframes drawOutline { to { stroke-dashoffset:0; } }

/* Hero */
.hero { padding:160px 20px 60px;text-align:center; }
.hero h1 { font-size:3rem;margin:0 0 8px;text-shadow:0 6px 30px rgba(0,198,255,.12); }
.hero .highlight { color:var(--accent1); }
.hero p.tag { color:#bcd9ff;margin:0 0 20px;font-weight:300; }
.btn {
  background:linear-gradient(45deg,var(--accent1),var(--accent2));border:none;
  padding:12px 22px;border-radius:28px;color:#fff;font-weight:600;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.btn:hover { transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,162,255,.18); }

/* About */
.about { padding:80px 20px;display:flex;justify-content:center; }
.about .card { max-width:900px;background:var(--card-bg);padding:36px;border-radius:16px;backdrop-filter:blur(6px); }
.socials { display:flex;gap:18px;justify-content:center;margin-top:18px; }
.socials a {
  width:46px;height:46px;border-radius:10px;background:var(--card-bg);display:flex;
  align-items:center;justify-content:center;color:var(--accent1);transition:transform .2s,box-shadow .2s;
}
.socials a:hover { transform:translateY(-6px) rotate(8deg);box-shadow:0 18px 30px rgba(0,162,255,.12); }
.socials a:nth-child(1) { animation:floating 2s ease-in-out infinite; }
.socials a:nth-child(2) { animation:floating 2s ease-in-out infinite .3s; }
.socials a:nth-child(3) { animation:floating 2s ease-in-out infinite .6s; }
@keyframes floating {0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Skills */
.skills { padding:80px 20px;max-width:1200px;margin:0 auto; }
.skills h2 { text-align:center;margin:40px 0 20px;font-size:1.8rem;color:#fff; }
.carousel-container { overflow:hidden;width:100%;height:60px;position:relative; }
.carousel-container:last-of-type { height:150px;display:flex;justify-content:center; }
.skill-carousel { display:flex;gap:12px;animation:scrollLeft 24s linear infinite;width:max-content; }
.skill-carousel[data-direction="right"] { animation:scrollRight 25s linear infinite; }
.skill-carousel.vertical { flex-direction:column;animation:scrollUp 10s linear infinite;align-items:center; }
.skill-badge { padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:400;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .2s,opacity .3s;flex-shrink:0;white-space:nowrap;animation:skillPulse 4s ease-in-out infinite; }
.skill-badge:hover { transform:scale(1.02); }
.skill-badge.tech { background:rgba(102,126,234,.15);color:var(--accent1);border:1px solid rgba(102,126,234,.3); }
.skill-badge.tools { background:rgba(240,147,251,.15);color:#f093fb;border:1px solid rgba(240,147,251,.3); }
.skill-badge.soft { background:rgba(79,172,254,.15);color:#4facfe;border:1px solid rgba(79,172,254,.3); }
.skill-badge:nth-child(1) { animation-delay:0s; }
.skill-badge:nth-child(2) { animation-delay:.3s; }
.skill-badge:nth-child(3) { animation-delay:.6s; }
.skill-badge:nth-child(4) { animation-delay:.9s; }
.skill-badge:nth-child(5) { animation-delay:1.2s; }
.skill-badge:nth-child(6) { animation-delay:1.5s; }
.skill-badge:nth-child(7) { animation-delay:1.8s; }
.skill-badge:nth-child(8) { animation-delay:2.1s; }
.skill-badge:nth-child(9) { animation-delay:2.4s; }
@keyframes skillPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes scrollLeft { 0%{transform:translateX(30%);opacity:.3} 50%{opacity:1} 100%{transform:translateX(-30%);opacity:.3} }
@keyframes scrollRight { 0%{transform:translateX(-30%);opacity:.3} 50%{opacity:1} 100%{transform:translateX(30%);opacity:.3} }
@keyframes scrollUp { 0%{transform:translateY(50%);opacity:.3} 50%{opacity:1} 100%{transform:translateY(-50%);opacity:.3} }

/* Projects */
.projects { padding:80px 20px 140px; }
.projects h2 { text-align:center;margin-bottom:28px;font-size:2.2rem; }
.grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1200px;margin:0 auto; }
.card-proj {
  background:var(--card-bg);padding:18px;border-radius:14px;opacity:0;
  transform:translateY(24px);transition:transform .4s,opacity .4s,box-shadow .3s;
}
.card-proj.reveal { opacity:1;transform:translateY(0);animation:projectPulse 6s ease-in-out infinite; }
.card-proj:hover { transform:translateY(-4px) scale(1.02);box-shadow:0 12px 30px rgba(0,162,255,.15); }
.card-proj:nth-child(1) { animation-delay:0s; }
.card-proj:nth-child(2) { animation-delay:1.2s; }
.card-proj:nth-child(3) { animation-delay:2.4s; }
.card-proj:nth-child(4) { animation-delay:3.6s; }
.card-proj:nth-child(5) { animation-delay:4.8s; }
@keyframes projectPulse { 0%,100%{opacity:.8;transform:translateY(0) scale(1)} 50%{opacity:1;transform:translateY(-2px) scale(1.01)} }
.proj-image-placeholder { width:100%;height:120px;background:linear-gradient(135deg,var(--accent1),var(--accent2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:16px;opacity:.8; }
.proj-desc { font-size:.9rem;color:#cfeeff;margin:12px 0; }
.tech-tags { display:flex;gap:6px;flex-wrap:wrap;margin:12px 0; }
.tech-tag { background:rgba(0,198,255,.1);color:var(--accent1);padding:4px 8px;border-radius:12px;font-size:.75rem;border:1px solid rgba(0,198,255,.2); }
.proj-actions { display:flex;gap:8px;margin-top:16px; }
.action-btn { display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;text-decoration:none;font-size:.8rem;transition:all .2s; }
.action-btn:hover { background:rgba(0,198,255,.1);border-color:var(--accent1);transform:translateY(-1px); }
.action-btn.demo { background:rgba(0,198,255,.1);border-color:var(--accent1); }
.action-btn.demo:hover { background:var(--accent1);color:#000; }



/* Footer */
footer { padding:40px 20px;text-align:center;color:#cfeeff;opacity:.8 }

/* Responsive */
@media (max-width:760px) {
  .hero h1 { font-size:2rem; }
  .logo-container.shrink { transform:scale(.32); }
}