:root {
  --black: #050505;
  --black-soft: #0d0d0d;
  --card: rgba(13, 13, 13, 0.86);
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: #050505;
  color-scheme: dark;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -10%, #262626 0%, #0a0a0a 32%, #050505 66%),
    var(--black);
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  overflow-x: hidden;
  position: relative;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 75%);
}


/* =========================================
   ABERTURA PREMIUM
========================================= */
body.intro-running {
  overflow: hidden;
}

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), visibility .55s;
}

.site-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.025) 50%, transparent 65%);
  opacity: .85;
  animation: introGlow 1.45s ease both;
}

.site-intro.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-content {
  position: relative;
  z-index: 1;
  width: min(76vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intro-logo {
  width: 100%;
  display: block;
  filter: invert(1);
  opacity: 0;
  transform: translateY(18px) scale(.965);
  animation: introLogo .62s .10s cubic-bezier(.16,1,.3,1) forwards;
}

.intro-progress {
  width: 100%;
  height: 2px;
  margin-top: 30px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

.intro-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.84));
  transform: scaleX(0);
  transform-origin: left center;
  animation: introLine .95s .32s cubic-bezier(.65,0,.35,1) forwards;
}


@keyframes introLogo {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes introLine {
  to { transform: scaleX(1); }
}


@keyframes introGlow {
  0% { opacity: 0; transform: scale(.96); }
  55% { opacity: 1; }
  100% { opacity: .55; transform: scale(1.04); }
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.ambient {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  opacity: .14;
}

.ambient-one {
  top: -120px;
  left: -100px;
  background: #ffffff;
}

.ambient-two {
  right: -120px;
  bottom: -150px;
  background: #8b8b8b;
}

.mouse-light {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px 18px calc(36px + env(safe-area-inset-bottom));
}

.profile-card {
  width: min(100%, 560px);
  position: relative;
  overflow: hidden;
  padding: 34px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    var(--card);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.top-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
}

.brand-header {
  text-align: center;
  padding: 4px 10px 26px;
}

.logo-frame {
  width: min(100%, 360px);
  margin: 0 auto 18px;
  padding: 10px 16px;
}

.brand-logo {
  width: 100%;
  display: block;
  filter: invert(1);
}

.verified-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 14px rgba(255,255,255,.75);
}

.bio-text {
  max-width: 420px;
  margin: 0 auto;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.65;
}

.link-list {
  display: grid;
  gap: 12px;
}

.link-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: 54px 1fr 38px;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--white);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
  position: relative;
  overflow: hidden;
}

.link-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}

.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.055);
  box-shadow:
    0 14px 28px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
  outline: none;
}

.link-card:hover::after {
  left: 155%;
}

.link-card.featured {
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}

.brand-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.white-icon-box {
  background: #fff;
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

.white-icon-box img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.brand-own {
  background: #fff;
  padding: 7px;
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

.brand-own img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-copy strong {
  font-family: "Montserrat", sans-serif;
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.link-copy small {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  color: rgba(255,255,255,.72);
  transition: transform .22s ease, color .22s ease;
}

.link-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-card:hover .link-arrow {
  transform: translate(3px, -3px);
  color: #fff;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding-top: 25px;
  font-family: "Montserrat", sans-serif;
  font-size: .66rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.34);
}

.footer-separator {
  font-size: .5rem;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 600px) {
  .page-shell {
    align-items: flex-start;
    padding: 18px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .profile-card {
    border-radius: 24px;
    padding: 27px 14px 20px;
  }

  .brand-header {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 22px;
  }

  .logo-frame {
    max-width: 305px;
    margin-bottom: 15px;
  }

  .bio-text {
    font-size: .88rem;
    line-height: 1.55;
  }

  .link-card {
    grid-template-columns: 50px 1fr 23px;
    min-height: 72px;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 17px;
  }

  .brand-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .white-icon-box img {
    width: 25px;
    height: 25px;
  }

  .link-copy strong {
    font-size: .92rem;
  }

  .link-copy small {
    font-size: .74rem;
  }

  .link-arrow {
    width: 22px;
    height: 22px;
  }

  .link-arrow svg {
    width: 19px;
    height: 19px;
  }

  .intro-content {
    width: min(78vw, 430px);
  }

  .intro-progress {
    margin-top: 28px;
  }

  .mouse-light {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* Tema branco — conserva o layout e as animações originais. */
:root {
  --black: #ffffff;
  --black-soft: #f7f7f7;
  --card: rgba(255,255,255,.92);
  --white: #111111;
  --muted: rgba(16,16,16,.64);
  --line: rgba(0,0,0,.10);
  --line-strong: rgba(0,0,0,.23);
}
html { background: #ffffff; color-scheme: light; }
body {
  background: radial-gradient(circle at 50% -10%, #ffffff 0%, #f8f8f8 43%, #f1f1f1 100%);
  color: #111111;
}
body::before {
  background: linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px);
  background-size: 36px 36px;
}
.site-intro { background: #ffffff; }
.site-intro::before {
  background: radial-gradient(circle at 50% 48%, rgba(0,0,0,.035), transparent 34%),
              linear-gradient(115deg, transparent 35%, rgba(0,0,0,.02) 50%, transparent 65%);
}
.intro-logo, .brand-logo { filter: none; }
.intro-progress { background: rgba(0,0,0,.10); }
.intro-progress span { background: linear-gradient(90deg,#111,#666); }
.ambient-one { background: #dddddd; }
.ambient-two { background: #d8d8d8; }
.mouse-light { background: radial-gradient(circle, rgba(0,0,0,.045), transparent 68%); }
.profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.83)), var(--card);
  box-shadow: 0 28px 85px rgba(0,0,0,.10), inset 0 1px 0 #fff;
}
.top-line { background: linear-gradient(90deg,transparent,rgba(0,0,0,.42),transparent); }
.verified-line { color: rgba(0,0,0,.72); }
.dot { box-shadow: 0 0 12px rgba(0,0,0,.2); }
.link-card {
  color: #111111;
  background: linear-gradient(180deg, #ffffff, #f8f8f8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.link-card::after { background: linear-gradient(90deg,transparent,rgba(0,0,0,.035),transparent); }
.link-card:hover,.link-card:focus-visible {
  background: #f3f3f3;
  box-shadow: 0 14px 28px rgba(0,0,0,.08), inset 0 1px 0 #fff;
}
.link-card.featured { border-color: rgba(0,0,0,.2); background: #f6f6f6; }
.white-icon-box { background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.09); }
.link-arrow { color: rgba(0,0,0,.65); }
.link-card:hover .link-arrow { color: #111111; }
.footer { color: rgba(0,0,0,.40); }

/* Centralização vertical em celulares: espaço igual acima e abaixo.
   Se a tela for baixa, o cartão continua rolável sem cortar conteúdo. */
@media (max-width: 600px) {
  .page-shell {
    min-height: 100vh; /* fallback */
    min-height: 100svh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 12px
             calc(18px + env(safe-area-inset-bottom, 0px));
  }
}