:root{
      --bg:#0a0a0a; --muted:#a1a1aa; --card:#111113; --border:rgba(255,255,255,.10);
      --tile:rgba(255,255,255,.06); --tile-hover:rgba(255,255,255,.10);
      --txt:#fff; --accent1:rgba(236,72,153,.22); --accent2:rgba(244,114,182,.22); --accent3:rgba(250,204,21,.22);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family: 'Muli', sans-serif;background:var(--bg);color:var(--txt);}
    .page{position:relative;min-height:100dvh;overflow:hidden}


    /* background gradients */
    .bg-wrap{position:absolute;inset:0;pointer-events:none}
    .bg-grad{position:absolute;inset:0;mask-image:radial-gradient(#fff,transparent 85%);
      background:
        radial-gradient(1200px 600px at 80% -10%, var(--accent1), transparent 60%),
        radial-gradient(1000px 500px at -10% 10%, var(--accent2), transparent 60%),
        radial-gradient(800px 400px at 50% 120%, var(--accent3), transparent 60%);
    }

    
    .blob{position:absolute;filter:blur(32px);opacity:.9;border-radius:999px}
    .blob.f{left:-160px;top:96px;width:18rem;height:18rem;background:rgba(217,70,239,.22);animation:float1 12s ease-in-out infinite}
    .blob.s{right:-120px;top:180px;width:18rem;height:18rem;background:rgba(251,191,36,.22);animation:float2 13s ease-in-out infinite .5s}
    .blob.t{left:50%;bottom:-80px;transform:translateX(-50%);width:20rem;height:20rem;background:rgba(244,63,94,.22);animation:float3 14s ease-in-out infinite .8s}
    .shine{position:absolute;inset:0;inset-block-end:auto;height:33%;background:linear-gradient(to bottom,rgba(255,255,255,.10),transparent);animation:glimmer 6s linear infinite}
    @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
    @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,20px)}}
    @keyframes float3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-25px)}}
    @keyframes glimmer{0%,100%{opacity:.15}50%{opacity:.30}}

    /* layout */
    .container {
    animation: fadeInUp .6s ease-out .05s both;
    }
    @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
    }
    .container{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:56px 24px;display:flex;flex-direction:column;align-items:center;min-height:100dvh;   animation: fadeInUp .6s ease-out .05s both;}
    .avatar-wrap{position:relative;margin-top:12px}
    .avatar-glow{position:absolute;inset:-6px;border-radius:999px;background:conic-gradient(from 0deg at 50% 50%, #ec4899, #f43f5e, #f59e0b, #ec4899);filter:blur(14px);opacity:.7}
    .avatar{position:relative;display:grid;place-items:center;border-radius:999px;padding:8px;outline:1px solid rgba(255,255,255,.08)}
    .avatar img{width:112px;height:112px;border-radius:999px;object-fit:cover;transition:transform .22s ease}
    .avatar:hover img{transform:scale(1.02) rotate(2deg)}

    h1{margin:20px 0 0;font-size:clamp(28px,4vw,36px);font-weight:800;letter-spacing:-.01em;text-align:center}
    .tagline{margin:10px 0 0;max-width:40ch;text-align:center;color:var(--muted);font-size:clamp(15px,2.5vw,18px)}

    .cta{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--tile);backdrop-filter:blur(8px);border:1px solid var(--border);text-decoration:none;color:var(--txt);font-weight:600;transition:transform .15s ease, background .2s ease}
    .cta:hover{transform:translateY(-2px);background:var(--tile-hover)}
    .cta svg{width:20px;height:20px}

    .links{width:100%;margin-top:22px;display:flex;flex-direction:column;gap:12px}
    .tile{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--tile);border:1px solid var(--border);backdrop-filter:blur(8px);text-decoration:none;color:var(--txt);transition:background .2s ease, transform .1s ease}
    .tile:hover{background:var(--tile-hover);transform:translateY(-1px)}
    .tile .left{display:flex;align-items:center;gap:12px}
    .icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
    .arrow{color:#a1a1aa;transition:transform .15s ease}
    .tile:hover .arrow{transform:translateX(2px)}

    .share{margin-top:28px;display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:var(--tile);border:1px solid var(--border);color:#e5e5e5;backdrop-filter:blur(8px)}
    .share:hover{background:var(--tile-hover)}
/* botão */
.cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--tile);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--txt);
  font-weight: 600;
  /* transições mais suaves para o “crescer” */
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.cta svg { width: 20px; height: 20px; }

/* efeito no hover: cresce um pouco e dá um leve brilho */
.cta:hover {
  transform: translateY(-2px) scale(1.03);
  background: var(--tile-hover);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* “quick” do ícone quando passa o mouse */
.cta:hover svg {
  animation: quick .5s ease-out;
}

/* animação do ícone: pequena chacoalhada/nudge */
@keyframes quick {
  0%   { transform: translateX(0) rotate(0); }
  20%  { transform: translateX(2px) rotate(3deg); }
  50%  { transform: translateX(-1px) rotate(-2deg); }
  80%  { transform: translateX(1px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0); }
}

    footer{margin-top:auto;width:100%;padding:48px 0;text-align:center;color:#a1a1aa;font-size:12px}

    /* small helper for reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .blob,.shine{animation:none}
      .avatar img{transition:none}
      .tile,.cta{transition:none}
    }