@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap");

:root {
  /* The "Amplified" Palette */
  --aqua-bright: #00d2be; /* The vibrant color from your favorite hover state */
  --white: #ffffff; /* Your new primary text color */
  --aqua-deep: #002b28; /* A dark, professional teal for the background */
  --aqua-accent: #004d47; /* A middle-tone for container depth */

  /* Typography */
  --font-main: "Outfit", sans-serif;
}

body {
  font-family: var(--font-main);
  /* Deep, immersive background to make white text pop */
  background: radial-gradient(
    circle at center,
    var(--aqua-accent) 0%,
    var(--aqua-deep) 100%
  );
  color: var(--white); /* Removes black globally */
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  text-align: center;
  width: 90%;
  max-width: 440px;
  padding: 40px 20px;
  /* Soft glass effect that works with the deep background */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

/* Maintaining your exact portrait dimensions */
.profile-img {
  display: block;
  width: min(100%, 280px);
  aspect-ratio: 1;
  height: 400px;
  margin: 0 auto;
  border-radius: 24px;
  object-fit: cover;
  /* Glow effect instead of a traditional shadow */
  box-shadow: 0 20px 40px rgba(0, 210, 190, 0.2);
}

.photo-caption {
  margin: 1.5rem auto;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--white);
  opacity: 0.8;
  line-height: 1.6;
}

/* Typography using White as requested */
h1,
h2,
h3 {
  color: var(--white);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.2rem, 6vw, 2.8rem);
  margin-bottom: 8px;
}

.subtitle {
  font-size: 1.1rem;
  color: var(--aqua-bright); /* Aqua acts as the "highlight" color now */
  font-weight: 500;
  margin-bottom: 40px;
}

/* Buttons: Defaulting to your "Amplified" style */
.links-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.btn {
  box-sizing: border-box;
  width: min(100%, 280px);
  text-align: center;
  text-decoration: none;
  padding: 18px 20px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1.05rem;

  /* THIS IS YOUR AMPLIFIED STATE AS THE NEW DEFAULT */
  background-color: var(--aqua-bright);
  color: var(--white);
  transform: translateY(0);
  box-shadow: 0 10px 30px rgba(0, 210, 190, 0.3);
  border: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover now adds extra "pop" and scale */
.btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0, 210, 190, 0.5);
  filter: brightness(1.1); /* Subtle glow on hover */
}

.btn:active {
  transform: scale(0.98);
}

/* Social Icons */
.social-icons {
  margin-top: 45px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-icons a {
  color: var(--white);
  font-size: 1.8rem;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  color: var(--aqua-bright);
  opacity: 1;
  transform: translateY(-3px);
}

footer p {
  margin-top: 40px;
  font-size: 0.7rem;
  color: var(--white);
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 2px;
}