/* Reset & base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body.dark-bg {
  min-height: 100vh;
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  background: linear-gradient(120deg, #232946 0%, #121629 100%);
  color: #f7e9e3;
  transition: background 0.7s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

body.comet-bg {
  min-height: 100vh;
  font-family: 'Inter', Arial, sans-serif;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #5b6ee1 0%, #232946 70%, #181a2a 100%);
  color: #f7f8fa;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.comet-center {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 2.5rem 1.2rem 1.5rem 1.2rem;
}

.comet-title {
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 2.1rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 32px #5b6ee155;
  line-height: 1.1;
}

.comet-avatar {
  width: clamp(90px, 28vw, 128px);
  height: clamp(90px, 28vw, 128px);
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 0 6px #5b6ee133, 0 4px 32px #23294655;
  border: none;
  background: #232946;
  transition: box-shadow 0.3s;
}

.comet-badge {
  display: inline-block;
  background: linear-gradient(90deg, #5b6ee1 0%, #a777e3 100%);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  padding: 0.38em 1.2em;
  border-radius: 999px;
  margin-bottom: 2.1rem;
  margin-top: -0.5rem;
  box-shadow: 0 2px 12px #5b6ee122;
  opacity: 0.93;
  letter-spacing: 0.01em;
}

.comet-divider {
  border: none;
  border-top: 1.5px solid #5b6ee1;
  width: 60%;
  max-width: 180px;
  margin: 1.2rem auto 2rem auto;
  opacity: 0.18;
}

.comet-socials {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  align-items: center;
  margin-bottom: 2.5rem;
}

.comet-social-btn {
  display: inline-block;
  background: rgba(91, 110, 225, 0.10);
  color: #5b6ee1;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 12px #5b6ee111;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-align: center;
}
.comet-social-btn:hover, .comet-social-btn:focus {
  background: linear-gradient(90deg, #5b6ee1 0%, #a777e3 100%);
  color: #fff;
  box-shadow: 0 4px 24px #5b6ee144;
}

.comet-footer {
  text-align: center;
  font-size: 1rem;
  color: #f7f8fa99;
  margin-top: auto;
  padding: 1.2rem 0 0.7rem 0;
  background: none;
  border-radius: 0;
  border: none;
  width: 100%;
}

main {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blur-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, #6e8efb33 0%, transparent 60%),
              radial-gradient(circle at 80% 70%, #a777e333 0%, transparent 60%),
              radial-gradient(circle at 50% 80%, #f7971e22 0%, transparent 70%),
              linear-gradient(120deg, #232946 0%, #121629 100%);
  filter: blur(60px) brightness(0.8) saturate(1.1);
  opacity: 0.7;
  transition: opacity 0.7s;
}

.site-title {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 1.5rem;
  color: #eebc7d;
  text-shadow: 0 2px 16px #23294644;
  transition: color 0.3s;
  text-align: center;
  word-break: break-word;
}
.site-title.big {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 2.5rem;
  color: #fff;
  text-shadow: 0 4px 32px #6e8efb33;
}

nav {
  margin-top: 0.5rem;
}
.nav-list {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-list a {
  color: #feb47b;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  transition: color 0.2s, text-decoration 0.2s;
  position: relative;
}
.nav-list a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #ffb385;
  transition: width 0.3s;
  position: absolute;
  left: 0; bottom: -2px;
}
.nav-list a:hover, .nav-list a:focus {
  color: #fff3e6;
}
.nav-list a:hover::after, .nav-list a:focus::after {
  width: 100%;
}

.section {
  margin-bottom: 2.5rem;
  outline: none;
  transition: box-shadow 0.3s;
}
.section:focus {
  box-shadow: 0 0 0 3px #ffb38555;
}
.section h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffb385;
  letter-spacing: 0.01em;
  transition: color 0.3s;
}
.section p, .section a {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #f7e9e3;
}
.section a {
  color: #feb47b;
  text-decoration: underline dotted;
  transition: color 0.2s, text-decoration 0.2s;
}
.section a:hover, .section a:focus {
  color: #fff3e6;
  text-decoration: underline;
}

.socials {
  margin-top: 1.2rem;
  display: flex;
  gap: 1.5rem;
}
.socials a {
  color: #ffb385;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  transition: color 0.2s, text-shadow 0.2s;
  text-shadow: 0 2px 8px #2d232e33;
}
.socials a:hover, .socials a:focus {
  color: #fff3e6;
  text-shadow: 0 2px 16px #ffb38555;
}

.hero-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  width: 100%;
}
.hero-socials a {
  color: #eebc7d;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
  border-radius: 0.7rem;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.hero-socials a:hover, .hero-socials a:focus {
  color: #fff;
  background: #6e8efb33;
}
.email-link {
  font-size: 1.1rem;
  color: #a777e3;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: none;
  padding: 0.6rem 1rem;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.email-link:hover, .email-link:focus {
  color: #fff;
  background: none;
  text-decoration: underline;
}

footer {
  text-align: center;
  font-size: 1rem;
  color: #f7e9e3cc;
  margin-top: auto;
  padding: 1.2rem 0;
  background: none;
  border-radius: 0;
  border: none;
  width: 100%;
}

/* Animations */
.glass-card, .site-title, .section, .nav-list a, .socials a {
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.pre-fade {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
}
.fade-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}

.profile-pic {
  display: block;
  margin: 1.5rem auto 2rem auto;
  width: clamp(88px, 28vw, 140px);
  height: clamp(88px, 28vw, 140px);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #232946;
  box-shadow: 0 4px 24px #23294633;
  background: #232946;
  transition: box-shadow 0.3s, border-color 0.3s, width 0.3s, height 0.3s;
}
@media (max-width: 700px) {
  .profile-pic {
    margin: 1rem auto 1.5rem auto;
    width: clamp(64px, 36vw, 100px);
    height: clamp(64px, 36vw, 100px);
  }
}

/* Responsive Design */
@media (max-width: 700px) {
  body.dark-bg {
    padding: 0 0.3rem;
  }
  main {
    max-width: 100%;
    padding: 0;
  }
  .site-title.big {
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
  }
  .hero-socials a, .email-link {
    font-size: 1rem;
    padding: 0.7rem 0.5rem;
  }
  .hero-socials {
    gap: 0.7rem;
    margin-bottom: 1.5rem;
  }
  footer {
    font-size: 0.95rem;
    padding: 0.7rem 0;
  }
}

@media (max-width: 700px) {
  .comet-center {
    max-width: 100%;
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    min-height: 90vh;
  }
  .comet-title {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  .comet-avatar {
    width: clamp(64px, 36vw, 90px);
    height: clamp(64px, 36vw, 90px);
    margin-bottom: 1rem;
  }
  .comet-badge {
    font-size: 0.93rem;
    padding: 0.32em 1em;
    margin-bottom: 1.2rem;
  }
  .comet-divider {
    margin: 0.7rem auto 1.2rem auto;
    width: 80%;
    max-width: 100px;
  }
  .comet-socials {
    gap: 0.7rem;
    margin-bottom: 1.2rem;
  }
  .comet-social-btn {
    font-size: 0.98rem;
    padding: 0.7em 1em;
  }
  .comet-footer {
    font-size: 0.95rem;
    padding: 0.7rem 0 0.5rem 0;
  }
}