/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-family: 'Montserrat', sans-serif;
  --card-radius: 38px;
  --button-radius: 22px;
  --card-max-width: 856px;
  --card-padding: 50px;

  /* Colors */
  --text-white: rgba(255, 255, 255, 0.9);
  --text-white-muted: rgba(255, 255, 255, 0.74);
  --text-dark: #000;
  --button-bg: #fff;
  --button-border: #e5e7eb;
  --button-dark-bg: #000;
  --button-dark-text: #fff;

  /* Animation */
  --animation-duration: 0.8s;
  --animation-stagger: 0.12s;
  --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html, body {
  min-height: 100%;
  font-family: var(--font-family);
  overflow-x: hidden;
}

/* Background - from Figma */
.background {
  position: fixed;
  inset: 0;
  background: linear-gradient(-55deg, rgb(67, 32, 15), rgb(6, 34, 61), rgb(45, 20, 50), rgb(6, 34, 61), rgb(67, 32, 15));
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
  z-index: -1;
}

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

/* Container */
.container {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
}

/* Card */
.card {
  width: 100%;
  max-width: var(--card-max-width);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0px 39.6px 79.2px -19px rgba(0, 0, 0, 0.25);
}

/* Info Section - gradient from Figma */
.info {
  padding: var(--card-padding);
  padding-bottom: 30px;
  text-align: center;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(142.074deg, rgba(205, 91, 111, 0.95) 0%, rgba(227, 202, 126, 0.95) 40.19%, rgba(227, 202, 126, 0.95) 61.54%, rgba(115, 174, 255, 0.95) 100%);
}

/* Photo */
.photo-wrapper {
  width: 200px;
  height: 200px;
  margin: 0 auto 30px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: #000;
  box-shadow:
    0 32px 40px -8px rgba(0, 0, 0, 0.1),
    0 13px 16px -10px rgba(0, 0, 0, 0.1);
}

.photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Name */
.name {
  font-size: 57px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.1;
  margin-bottom: 10px;
}

/* Subtitle */
.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.subtitle span {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-white-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.subtitle .dot {
  width: 8px;
  height: 8px;
  background: var(--text-white-muted);
  border-radius: 50%;
}

/* Description */
.description {
  font-size: 23px;
  font-weight: 400;
  color: var(--text-white);
  line-height: 1.55;
  letter-spacing: -0.24px;
  max-width: 700px;
  margin: 0 auto;
}

/* Links Section */
.links {
  padding: 60px var(--card-padding) 40px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  background: #fff;
}

/* Link Button */
.link-button {
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 3px;
  padding-left: 53px;
  background: var(--button-bg);
  border: 3px solid var(--button-border);
  border-radius: var(--button-radius);
  text-decoration: none;
  transition: all 0.3s ease;
  min-height: 77px;
}

.link-button:hover {
  background: var(--button-dark-bg);
  border-color: var(--button-dark-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.link-button:hover .link-label {
  color: var(--button-dark-text);
}

.link-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.link-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}

.link-button:hover .link-icon img {
  filter: invert(1);
}

.link-label {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: -0.24px;
}

/* Copyright */
.copyright {
  padding: 20px var(--card-padding) 30px;
  text-align: center;
  font-size: 16px;
  color: var(--text-white-muted);
}

/* ==================== */
/* ANIMATIONS           */
/* ==================== */

.animate {
  opacity: 0;
  transform: translateY(20px) translateX(15px);
}

.animate.visible {
  animation: fadeSlideUp var(--animation-duration) var(--animation-easing) forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) translateX(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

/* ==================== */
/* RESPONSIVE           */
/* ==================== */

/* Tablet */
@media (max-width: 900px) {
  :root {
    --card-padding: 40px;
  }

  .name {
    font-size: 42px;
  }

  .description {
    font-size: 20px;
  }

  .link-button {
    padding-left: 40px;
    min-height: 70px;
  }

  .link-label {
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --card-padding: 20px;
    --card-radius: 22px;
    --button-radius: 14px;
  }

  .container {
    padding: 12px;
    align-items: flex-start;
    padding-top: 24px;
  }

  .photo-wrapper {
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
  }

  .name {
    font-size: 22px;
  }

  .subtitle span {
    font-size: 11px;
  }

  .subtitle .dot {
    width: 5px;
    height: 5px;
  }

  .description {
    font-size: 13px;
    line-height: 1.5;
  }

  .links {
    gap: 11px;
    padding-top: 16px;
  }

  .link-button {
    padding-left: 20px;
    gap: 11px;
    min-height: 48px;
  }

  .link-icon {
    width: 21px;
    height: 21px;
  }

  .link-label {
    font-size: 13px;
  }

  .copyright {
    font-size: 11px;
  }
}

/* Small mobile */
@media (max-width: 380px) {
  .name {
    font-size: 19px;
  }

  .description {
    font-size: 11px;
  }
}