:root {
  --color-cream: #fff8ef;
  --color-linen: #f4e2d4;
  --color-rose: #c9808a;
  --color-terracotta: #c9795d;
  --color-gold: #d8aa5f;
  --color-sage: #8eb4a0;
  --color-sky: #9dbfd0;
  --color-ink: #2e211c;
  --color-muted: #6f5a51;
  --glass-card: rgba(255, 250, 245, 0.9);
  --glass-card-disabled: rgba(255, 244, 235, 0.64);
  --glass-border: rgba(255, 255, 255, 0.5);
  --shadow-cover: 0 30px 90px rgba(48, 27, 20, 0.34);
  --shadow-card: 0 12px 30px rgba(44, 28, 22, 0.18);
  --shadow-card-hover: 0 16px 38px rgba(44, 28, 22, 0.25);
  --radius-cover: 28px;
  --radius-card: 18px;
  --page-padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-cream);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background:
    radial-gradient(circle at 16% 12%, rgba(201, 128, 138, 0.3), transparent 18rem),
    radial-gradient(circle at 84% 18%, rgba(142, 180, 160, 0.28), transparent 20rem),
    radial-gradient(circle at 54% 96%, rgba(216, 170, 95, 0.24), transparent 22rem),
    linear-gradient(145deg, #ead0be, #b98977 44%, #7f625f);
}

img {
  display: block;
  max-width: 100%;
}

.page-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--page-padding);
  display: grid;
  place-items: center;
}

.profile-cover {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #d7b29e;
}

.cover-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(46, 33, 28, 0.08) 0%, rgba(46, 33, 28, 0.04) 32%, rgba(46, 33, 28, 0.5) 62%, rgba(46, 33, 28, 0.88) 100%),
    linear-gradient(135deg, rgba(201, 128, 138, 0.18), transparent 38%, rgba(142, 180, 160, 0.16)),
    radial-gradient(circle at 16% 82%, rgba(216, 170, 95, 0.24), transparent 16rem);
}

.profile-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1.25rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.profile-header {
  margin-bottom: 0.85rem;
}

.eyebrow {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.62rem;
  padding: 0.3rem 0.62rem;
  color: #fff6ec;
  background: rgba(255, 248, 239, 0.16);
  border: 1px solid rgba(255, 248, 239, 0.34);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #fffaf2;
  font-size: 2.62rem;
  line-height: 0.96;
  text-shadow: 0 4px 26px rgba(37, 23, 19, 0.54);
}

.subtitle {
  max-width: 24rem;
  margin: 0.58rem 0 0;
  color: rgba(255, 250, 242, 0.9);
  font-size: 0.96rem;
  text-shadow: 0 2px 18px rgba(37, 23, 19, 0.4);
}

.intro {
  max-width: 25rem;
  margin: 0.56rem 0 0;
  color: rgba(255, 248, 239, 0.78);
  font-size: 0.82rem;
  line-height: 1.38;
}

.links-list {
  display: grid;
  gap: 0.55rem;
}

.link-card {
  --accent-color: var(--color-gold);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 4.3rem;
  padding: 0.72rem;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  transition: transform 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent-color), transparent 46%);
  opacity: 0.1;
}

.link-card[href] {
  cursor: pointer;
}

.link-card[href]:hover,
.link-card[href]:focus-visible {
  background: rgba(255, 252, 247, 0.96);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.link-card[href]:focus-visible {
  outline: 3px solid rgba(255, 248, 239, 0.42);
  outline-offset: 3px;
}

.link-card-community {
  --accent-color: var(--color-rose);
}

.link-card-whatsapp {
  --accent-color: var(--color-sage);
}

.link-card-soon {
  --accent-color: var(--color-gold);
}

.is-disabled {
  min-height: 3.85rem;
  color: rgba(46, 33, 28, 0.68);
  background: var(--glass-card-disabled);
  box-shadow: 0 8px 22px rgba(44, 28, 22, 0.13);
}

.link-icon,
.link-content,
.link-arrow {
  position: relative;
  z-index: 1;
}

.link-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  background:
    linear-gradient(#fffaf4, #f7e7da) padding-box,
    linear-gradient(135deg, var(--accent-color), rgba(157, 191, 208, 0.66)) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.link-content {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.link-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.link-title {
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.link-description {
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.28;
}

.link-arrow {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  color: #8d574d;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(111, 90, 81, 0.13);
  border-radius: 999px;
  font-size: 1.28rem;
  line-height: 1;
}

.soon-badge {
  padding: 0.14rem 0.46rem;
  color: #744e18;
  background: rgba(255, 225, 166, 0.88);
  border: 1px solid rgba(216, 170, 95, 0.48);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
}

.footer {
  padding-top: 0.65rem;
  text-align: center;
}

.footer p {
  margin: 0;
  color: rgba(255, 248, 239, 0.58);
  font-size: 0.76rem;
}

@media (min-width: 34rem) {
  :root {
    --page-padding: 1.35rem;
  }

  .profile-cover {
    width: min(100%, 29rem);
    min-height: min(48rem, calc(100vh - 2.7rem));
    min-height: min(48rem, calc(100svh - 2.7rem));
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-cover);
    box-shadow: var(--shadow-cover);
  }

  .profile-content {
    min-height: min(48rem, calc(100vh - 2.7rem));
    min-height: min(48rem, calc(100svh - 2.7rem));
    padding: 1.35rem 1.15rem 0.95rem;
  }

  .cover-image {
    object-position: center 30%;
  }

  h1 {
    font-size: 3.05rem;
  }
}

@media (max-height: 43rem) {
  .intro {
    display: none;
  }

  .profile-header {
    margin-bottom: 0.65rem;
  }

  .link-card {
    min-height: 3.95rem;
    padding: 0.62rem;
  }

  .link-description {
    font-size: 0.72rem;
  }
}

@media (max-width: 22rem) {
  .profile-content {
    padding-inline: 0.78rem;
  }

  .link-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .link-arrow {
    display: none;
  }
}