:root {
  --linkedin-blue: #0a66c2;
  --linkedin-blue-dark: #004182;
  --linkedin-blue-light: #378fe9;

  --background: #f3f2ef;
  --surface: rgba(255, 255, 255, 0.96);

  --text-primary: #191919;
  --text-secondary: #666666;
  --text-light: #8a8a8a;

  --border: rgba(0, 0, 0, 0.08);

  --shadow:
    0 6px 24px rgba(0, 0, 0, 0.06),
    0 24px 70px rgba(0, 0, 0, 0.05);

  --radius: 22px;
}


/* ==============================
   RESET
   ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  min-height: 100vh;
  min-height: 100dvh;

  display: grid;
  place-items: center;

  padding: 24px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text-primary);

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(10, 102, 194, 0.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(10, 102, 194, 0.07),
      transparent 28%
    ),
    var(--background);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==============================
   PAGE
   ============================== */

.page {
  width: 100%;
  max-width: 470px;
}


/* ==============================
   CARD
   ============================== */

.profile-card {
  position: relative;

  overflow: hidden;

  padding:
    clamp(38px, 8vw, 54px)
    clamp(28px, 7vw, 48px);

  text-align: center;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(12px);

  animation:
    card-enter
    700ms
    cubic-bezier(.2, .8, .2, 1)
    both;
}


.top-accent {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--linkedin-blue),
      var(--linkedin-blue-light),
      transparent
    );
}


/* ==============================
   AVATAR
   ============================== */

.profile-avatar {
  width: 86px;
  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    0 auto
    24px;

  color: #ffffff;

  font-size: 26px;
  font-weight: 700;

  letter-spacing: -1px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--linkedin-blue),
      var(--linkedin-blue-dark)
    );

  box-shadow:
    0 12px 28px
    rgba(10, 102, 194, 0.24);

  animation:
    avatar-enter
    700ms
    cubic-bezier(.2, .8, .2, 1)
    100ms
    both;
}


/* ==============================
   TYPOGRAPHY
   ============================== */

.eyebrow {
  margin:
    0 0 10px;

  color:
    var(--linkedin-blue);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


h1 {
  margin:
    0;

  font-size:
    clamp(
      30px,
      8vw,
      40px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.3px;

  font-weight:
    700;
}


.role {
  margin:
    12px 0 0;

  color:
    var(--text-secondary);

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.5;
}


.intro {
  max-width:
    330px;

  margin:
    18px auto 0;

  color:
    var(--text-secondary);

  font-size:
    14px;

  line-height:
    1.65;
}


/* ==============================
   DIVIDER
   ============================== */

.divider {
  width:
    44px;

  height:
    2px;

  margin:
    28px auto;

  border-radius:
    999px;

  background:
    var(--linkedin-blue);
}


/* ==============================
   LOADING
   ============================== */

.loading-message {
  min-height:
    22px;

  margin:
    0 0 16px;

  color:
    var(--text-primary);

  font-size:
    14px;

  font-weight:
    500;
}


.loader {
  width:
    100%;

  height:
    5px;

  overflow:
    hidden;

  margin-bottom:
    15px;

  border-radius:
    999px;

  background:
    #e8e8e8;
}


.loader-bar {
  width:
    0%;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--linkedin-blue-dark),
      var(--linkedin-blue),
      var(--linkedin-blue-light)
    );

  box-shadow:
    0 0 14px
    rgba(10, 102, 194, 0.45);

  animation:
    loading
    3.1s
    cubic-bezier(.25, .75, .2, 1)
    forwards;
}


/* ==============================
   STATUS
   ============================== */

.status {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--text-secondary);

  font-size:
    12px;
}


.status-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--linkedin-blue);

  animation:
    pulse
    1.2s
    ease-in-out
    infinite;
}


/* ==============================
   FALLBACK
   ============================== */

.fallback {
  margin-top:
    28px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--border);

  opacity:
    0;

  animation:
    fallback-enter
    500ms
    ease
    1.7s
    forwards;
}


.fallback p {
  margin:
    0 0 12px;

  color:
    var(--text-light);

  font-size:
    12px;
}


/* ==============================
   LINKEDIN BUTTON
   ============================== */

.linkedin-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  min-height:
    44px;

  padding:
    9px 20px;

  color:
    var(--linkedin-blue);

  font-size:
    14px;

  font-weight:
    650;

  text-decoration:
    none;

  border:
    1px solid
    var(--linkedin-blue);

  border-radius:
    999px;

  transition:
    background
      160ms ease,
    color
      160ms ease,
    transform
      160ms ease;
}


.linkedin-button:hover {
  background:
    rgba(
      10,
      102,
      194,
      0.08
    );
}


.linkedin-button:active {
  transform:
    scale(0.97);
}


.linkedin-button:focus-visible {
  outline:
    3px solid
    rgba(
      10,
      102,
      194,
      0.22
    );

  outline-offset:
    3px;
}


.linkedin-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    21px;

  height:
    21px;

  color:
    white;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1;

  border-radius:
    3px;

  background:
    var(--linkedin-blue);
}


.arrow {
  transition:
    transform
    160ms ease;
}


.linkedin-button:hover
.arrow {
  transform:
    translateX(3px);
}


/* ==============================
   FOOTER
   ============================== */

footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    18px;

  color:
    #777777;

  font-size:
    11px;

  letter-spacing:
    0.02em;
}


.footer-dot {
  color:
    var(--linkedin-blue);
}


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

@keyframes card-enter {

  from {
    opacity:
      0;

    transform:
      translateY(16px)
      scale(0.98);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes avatar-enter {

  from {
    opacity:
      0;

    transform:
      scale(0.75)
      rotate(-5deg);
  }

  to {
    opacity:
      1;

    transform:
      scale(1)
      rotate(0deg);
  }

}


@keyframes loading {

  0% {
    width:
      0%;
  }

  20% {
    width:
      17%;
  }

  45% {
    width:
      46%;
  }

  70% {
    width:
      72%;
  }

  88% {
    width:
      90%;
  }

  100% {
    width:
      100%;
  }

}


@keyframes pulse {

  0%,
  100% {
    opacity:
      0.35;

    transform:
      scale(0.8);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1);
  }

}


@keyframes fallback-enter {

  to {
    opacity:
      1;
  }

}


/* ==============================
   MOBILE
   ============================== */

@media (
  max-width: 480px
) {

  body {
    padding:
      16px;
  }

  .profile-card {
    border-radius:
      18px;
  }

}


/* ==============================
   ACCESSIBILITY
   ============================== */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .loader-bar {
    width:
      100%;
  }


  .fallback {
    opacity:
      1;
  }

}