:root{
  --ink:#0A0C10; --ink-2:#12151C; --ink-3:#1A1E27;
  --gold:#D9B25E; --gold-hi:#F3D999; --gold-lo:#9C7A32;
  --teal:#2F7A73; --teal-hi:#4FA79D;
  --ivory:#F4EFE4; --muted:#A9A296; --muted-2:#726C60;
  --line:rgba(244,239,228,.10); --line-2:rgba(244,239,228,.18);
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-serif:'Playfair Display',Georgia,serif;
  --f-sans:'Poppins',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100svh;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--f-sans);
  overflow-x:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 20px;
}

/* ═══════════ animated background ═══════════ */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%, #171B24 0%, var(--ink) 55%);
}
.bg__blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  will-change:transform;
}
.bg__blob--1{
  width:56vmax;height:56vmax;left:-18vmax;top:-20vmax;
  background:radial-gradient(circle at 40% 40%, var(--gold) 0%, transparent 70%);
  animation:drift1 26s ease-in-out infinite;
}
.bg__blob--2{
  width:60vmax;height:60vmax;right:-24vmax;bottom:-24vmax;
  background:radial-gradient(circle at 60% 60%, var(--teal) 0%, transparent 70%);
  animation:drift2 32s ease-in-out infinite;
}
.bg__blob--3{
  width:40vmax;height:40vmax;left:50%;top:60%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, #6E3FA0 0%, transparent 72%);
  opacity:.28;
  animation:drift3 22s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6vmax,5vmax) scale(1.12)}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5vmax,-6vmax) scale(1.08)}
}
@keyframes drift3{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-46%,-56%) scale(1.15)}
}

.bg__grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size:3px 3px;
}

.bg__particles{position:absolute;inset:0;pointer-events:none}
.particle{
  position:absolute;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-hi) 0%, transparent 70%);
  opacity:0;
  animation-name:rise;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) scale(1)}
  10%{opacity:.75}
  85%{opacity:.4}
  100%{opacity:0;transform:translateY(-100vh) scale(.4)}
}

/* ═══════════ content ═══════════ */
.card{
  position:relative;z-index:2;
  width:100%;max-width:420px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}

.avatar-ring{
  width:132px;height:132px;border-radius:50%;
  padding:4px;
  background:conic-gradient(from 0deg, var(--gold), var(--teal-hi), var(--gold-hi), var(--gold));
  box-shadow:var(--shadow), 0 0 0 1px rgba(244,239,228,.06);
  animation:float 5.5s ease-in-out infinite;
}
.avatar{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:center 30%;
  border:3px solid var(--ink);
  display:block;background:var(--ink-2);
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.name{
  font-family:var(--f-serif);
  font-weight:700;
  font-size:clamp(1.5rem,5vw,1.9rem);
  letter-spacing:.04em;
  margin:22px 0 0;
  background:linear-gradient(140deg, var(--gold-hi), var(--ivory) 45%, var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 30px rgba(217,178,94,.25);
}

.rule{display:flex;align-items:center;justify-content:center;width:100%;margin:16px 0 30px}
.rule span{
  width:64px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  position:relative;
}
.rule span::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 8px 2px rgba(243,217,153,.6);
}

.links{display:flex;flex-direction:column;gap:14px;width:100%}

.link-btn{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 18px;border-radius:18px;
  background:linear-gradient(155deg, rgba(244,239,228,.07), rgba(244,239,228,.03));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-decoration:none;color:var(--ivory);
  transition:transform .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease);
}
.link-btn:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  background:linear-gradient(155deg, rgba(244,239,228,.11), rgba(244,239,228,.05));
  box-shadow:0 16px 34px -16px rgba(217,178,94,.35);
}
.link-btn:active{transform:translateY(-1px) scale(.99)}

.link-btn__icon{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,239,228,.06);
  border:1px solid var(--line-2);
  transition:filter .3s var(--ease);
}
.link-btn__icon svg{width:20px;height:20px}
.link-btn__icon[data-tone="facebook"]{color:#7FB3FF}
.link-btn__icon[data-tone="instagram"]{color:#E893C4}
.link-btn__icon[data-tone="whatsapp"]{color:#7FE0A8}
.link-btn__icon[data-tone="email"]{color:var(--gold-hi)}
.link-btn__icon[data-tone="linkedin"]{color:#6FC3F0}

.link-btn__label{
  flex:1;text-align:start;
  font-weight:600;font-size:.98rem;letter-spacing:.02em;
}

.link-btn__arrow{
  flex:none;width:16px;height:16px;color:var(--muted);
  transition:transform .32s var(--ease), color .32s var(--ease);
}
.link-btn:hover .link-btn__arrow{transform:translateX(4px);color:var(--gold-hi)}

@media (max-width:380px){
  .avatar-ring{width:112px;height:112px}
  .link-btn{padding:12px 15px;border-radius:16px}
}

@media (prefers-reduced-motion:reduce){
  .bg__blob,.avatar-ring,.particle{animation:none!important}
}